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
Andrew Folts
14,238 PointsWhat's the best way to create a two column grid of divs with no defined height?
I'm building a restaurant website and there's a section with a weekly specials menu of items broken into divs by their category (pizza, risotto, soup, etc).
I've been playing around with Flexbox and floating, but I keep ending up with vertical gaps. Do I need jQuery to organize the divs intelligently so they fit together in the most space-efficient way, or can this be done with CSS?
2 Answers
Steven Parker
229,786 PointsThis might be a place where the CSS column-count property would be a good choice. Another possibility might be an old-fashioned <table>.
Have you seen the Multi-Column Layout video in the CSS - Beyond the Basics course?
Jessica Hansen
8,900 PointsFlexbox would have been my first answer, but it seems to be giving you issues. We sometimes use a Match Height jQuery plugin that works pretty well. You can find it here: http://brm.io/jquery-match-height/
Andrew Folts
14,238 PointsAndrew Folts
14,238 PointsI actually came to the same conclusion after doing some more research. CSS column-count works perfectly for what I needed, it's super simple, and no jQuery needed, which is always a plus.
Thanks for the tip!