Jeevan Jose Jeevan Jose - 22 days ago 5
CSS Question

Is there a CSS only solution to make divs equal height in a vertical grid?

I have a

.parent
div and within that I have an unknown number of
.child
divs. I need the child divs to be in a vertical grid and all of them need to be equal height. Unfortunately, I can't use javascript for this.

I have tried different combinations of
display: inline-block
and
float: left
, but I can't get the children to be the same height.

I am able to achieve same height using
display: table-cell
but then I run into another problem that the children don't split onto multiple lines if the total width exceeds the container width.

Is there a way to do this with pure css? I only need to support IE10+ if that helps (flexbox?)

Answer

You can use a wrapping flexbox - see how the heights are auto-adjusted (due to the align-items:stretch property which is default) when the child divs wrap as you resize the window.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-flow: row wrap;
}
.wrapper > div {
  border: 1px solid red;
}
<div class="wrapper">
  <div>
    some text here some text here
  </div>

  <div>
    some text here
    <br/>more text here
  </div>

  <div>
    some text here
    <br/>more text here and some more and some more
  </div>

  <div>
    some text here
    <br/>more text here
    <br/>more text here
  </div>

</div>