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

JavaScript

Andrew Folts
Andrew Folts
14,238 Points

What'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
Steven Parker
229,582 Points

This 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?

Andrew Folts
Andrew Folts
14,238 Points

I 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!

Jessica Hansen
Jessica Hansen
8,900 Points

Flexbox 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/