Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Vamsi Pavan Mahesh Gunturu
4,541 PointsWhat is the use of columnWidth in masonry?
I am following this http://codepen.io/desandro/pen/JdEyYQ. But I don't understand the concept of columnWidth. Since we are having the width for each item in css itself. So what is the use of columnWidth?
1 Answer
Jason Anello
Courses Plus Student 94,610 PointsHi Vamsi,
The following page from the masonry site explains what the columnWidth option is for: http://masonry.desandro.com/options.html#columnwidth
Basically, it's setting up a horizontal grid that the items should line up with.
It states, "We recommend setting columnWidth. If columnWidth is not set, Masonry will use the outer width of the first item."
Try commenting out the columnWidth. After the demo refreshes you should see no change. Masonry is using the width of that first item which happens to start out at 160px. Using that first item to make the grid or setting columnWidth to 160px are doing the same thing.
The difference happens when you click on that first item and it gets bigger (320px wide). Masonry is now using that width to layout the grid and you should see lots of wasted space now. The smaller 160px items no longer appear side by side because they are now aligned to a 320px grid.
So by setting columnWidth you're able to control the size of the grid rather than having that first item control the size of the grid.
Vamsi Pavan Mahesh Gunturu
4,541 PointsThanks Jason, that is really helpful information. I would tag these masonory posts under JS from nect time
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 Pointschanged category to javascript