Core JavaScript Multi Column Layout Grid Programming Tutorial

Learn to program multi-column grid layouts using just a little bit of core JavaScript. A multi column grid allows for boxes of varying heights to neatly stack across and down the page with no wasted space. It is an effect that cannot be rendered using tables or CSS floating elements when one is dealing with DIVs of varying heights.

[slidewineder]

Just starting out with Javascript and I find these videos incredibly helpful even though I don't fully grasp everything going on in them.

[YoTEE]

Adam, you are easily one of the best tutors out there!
Video's are always to the point and very clear. Thank you so much!

[MpeteloVemba]

Great tutorial as usual. I am learning allot since I started watching your videos. Thank you Adam.

[Ladynatalie]

Thank you for this great tutorial. Best explanation, best pronounciation (as I am German) and very helpful to me.

[peterm.souzajr.]

super helpful for my multi column and multi row social network ! so easy to follow

[crestinglight]

Thank you for this. I was really struggling with getting a masonry layout that renders horizontally.

[decojoe]

Adam your videos are  Super practical; awesome good stuff.  by  any chance do  you have a video that shows  how  to build a grid similar  to turbo tax or  quicken loans ?   I'm  looking  to do just 2 vertical columns on an app with the ability chance the  colors. thanks

[fahim]

Hi, Adam thanx a lot for this magical tutorial. I just finding it. is it supported mixItUp or Isotope like Jquery plugin ? Otherwise what solution to create this type of effective portfolio?? reply hurry up please

[RmonikMusic]

The problem with this method is you're always using the same colums. What i mean is that if you were to have every third element to be much larger than the others, the third column would be much longer rather than having the new elements fit in wherever they find a spot.

[atypical_blk_guy]

Is there a way to make a grid that has just three boxes? The first box would have a width of 700px and I want the other 2 boxes to be to the right of the large one but stacked on top of each other. Can that be rendered as well?

[GeofreyBanzi]

Is there a way for me to make these boxes show their contents?

[sdhpCH]

Adam, is THAT all the magic behind masonry?

[malakali-kxuy]

I used your code in cordova app that support html, js and css to run on mobile screen , but the code doesn't work on mobile screen until l resized and rotated from vertical mode to horizontal mode .
can you help me, How can I solve this problem ?

[islammurat]

to make them work on tab or mob should i reload the page ???

[Natasha-mjuz]

hey can you guys help in small problem, it is about how to make columns display like Grid and List like that in Youtube

[eliasabraham]

i really don't understand this part if(i % cols == 0)

well since the columns are 14 then that's not true because he has set i to 1

please can someone tell me whats going on

[NelsonBiglar]

can this work with wordpress where if a post is created it will add it to a specific block?

[gravityarm]

It's script equal masonary plugin ?

[codalite]

Who is that gay that made a dislike???

[Fullrusher]

I find this stuff impossible to learn, I’m on the verge of giving in