CSS - Equal Height Columns?

Question

In CSS, I can do something like this:

But I\'ve no idea how to change that to something like:

---

Is this possible with CSS?

Answer 1

Modern way to do it: CSS Grid.

HTML:

  
{...}
  
{...}
  
{...}

CSS:

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

Live example is here.

repeat(auto-fit, minmax(200px, 1fr)); part sets columns width. Every column takes 1 fraction of available space, but can't go less than 200px. Instead of shrinking below 200px it wraps below, so it's even responsive. You can also have any number of columns, not just 3. They'll all fit nicely.

If you need exactly 3 columns, use grid-template-columns: repeat(3, 1fr); instead. You can still have more elements, they will wrap, be responsive, but always be placed in 3 column layout.

More on CSS Grid on MDN or css-tricks.

It's clean, readable, maintainable, flexible and also that simple to use!