Make column elements equal height on each row

Question

This is the layout I want to get:

So regardless of what's contained in these divs, I want all of them to stretch to the height of the largest div on that row so that everything remains alligned.

However, I cannot think of a way that I can make the items have the same height so that they are all aligned. I could use CSS tables (using display: table), but then I'd need to split it up by rows, as opposed to columns, so the semantics would get messed up.

Other than display: table, I feel like there should be a way with flexbox, but I can't for the life of me figure out what it could be. I can make the container div the same with flex by adding another container around the columns, but I'm not sure how I'd use that to make the children have the same height.

I could also use Javascript to loop through all of them, but that fees like a horrible, inefficient solution.

Here's some code which shows A) What I want to have, regardless of the content inside the divs, and B) what currently happens.

Codepen

* {
  font-family: Helvetica, sans-serif;
}

h2 {
  text-align: center;
  clear: both;
  padding-top: 2em;
}

.col {
  float: left;
  width: 30%;
  background-color: #ebebeb;
  margin-left: 1em;
}
.col div {
  padding: 1em;
  width: 80%;
  margin: 0 auto;
}
.col .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
}
.col .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  margin-top: 1em;
}
.col .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
  margin-top: 1em;
}

<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>


<h2>Misaligned. Chaos descends.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>

EDIT: Each .col represents a post in the Wordpress archive page, so it must be arranged in columns.

Hi @DanLynch thanks for reading my question. Yes, flexbox is an option. — M. Salman Khan, Oct 26 '17 at 00:04
Along with my answer, this might be a possible duplicate and a fallback for browsers that doesn't support Flexbox ... [how to get header from cards or similar to have the same height with flex box?](https://stackoverflow.com/questions/46596170/how-to-get-header-from-cards-or-similar-to-have-the-same-height-with-flex-box/46600682#46600682) — Asons, Oct 26 '17 at 07:59

G-Cyrillus · Answer 1 · 2017-10-26T00:18:43.313

In the futur , you may use grid and a single container:

* {
  font-family: Helvetica, sans-serif;
}

h2 {
  text-align: center;
  clear: both;
  padding-top: 2em;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
  background: repeating-linear-gradient(to right, transparent 1%, #ebebeb 1%, #ebebeb 33%, transparent 33%, transparent 34%);
}

div {
  padding: 1em;
}

div div {
  margin: 0 4%;
}

.sectionOne {
  background-color: #2b2b2b;
  color: #fff;
  grid-row: 1
}

.sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  grid-row: 2
}

.sectionThree {
  background-color: #8c8c8c;
  color: #fff;
}

.grid {counter-reset:div}
.grid>div:before {
  counter-increment:div;
  content:'div number:'counter(div);
  background:yellow;
  color:red;
  padding:0 0.5em;
  font-size:0.75em;
}

<h2>Everything Aligned. The world is a happy place.</h2>
<div class="grid">
<!-- first post-->
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur
    in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
<!-- end first post-->
<!-- second post-->
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, <br/>consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
<!-- end second post-->
<!-- third post-->
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus lorem
  </div>
<!-- end third post-->
</div>

usefull ressource :

https://css-tricks.com/snippets/css/complete-guide-grid/
http://gridbyexample.com/
and the codepen to play with
Are you arrived in the future yet ? check it out here http://caniuse.com/#search=grid ;)

Thanks for the response! This does indeed do exactly what I intended, but as you say, it's a solution for the future, since browser support isn't quite there yet. +1 for mentioning it though! — M. Salman Khan, Oct 26 '17 at 00:14

Asons · Accepted Answer · 2017-10-26T07:55:19.220

The only way to do that with Flexbox, if not to use script, is to remove the col and use the order property to visually position them column wise.

The reason is simple, the sections need to be siblings to enable equal height per row.

Based on how many items it will be, one might need to group them to keep the necessary CSS rules on a reasonable level, though as that is not available in the question, I here show a solution based on the existing amount of items.

As a replacement for the removed col's background color, I used a border to make it simple, but one can i.e. use pseudo elements or an extra inner element to accomplish the same effect.

Updated codepen

Stack snippet

* {
  font-family: Helvetica, sans-serif;
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.cols div {
  padding: 1em;
  border: 1em solid #ebebeb;
  box-sizing: border-box;
  width: 30%;
}
.cols .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.cols .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.cols .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

<div class="cols">

  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>

</div>

Updated

As mentioned, and as a sample for more than 3 posts, and a 3 column layout, one can simply repeat the above solution, with an extra rule giving all but the first cols a top margin.

Stack snippet

* {
  font-family: Helvetica, sans-serif;
}

.cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.cols + .cols {
  margin-top: 1em;
}
.cols div {
  padding: 1em;
  border: 1em solid #ebebeb;
  box-sizing: border-box;
  width: 30%;
}
.cols .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.cols .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
.cols .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
  border-width: 0 1em 1em 1em;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

<div class="cols">

  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>

</div>

<div class="cols">

  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa.
  </div>


  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus.
  </div>

</div>

Johannes · Answer 3 · 2017-10-26T00:03:04.950

If you organize them in rows instead of columns, you can use display: flexon the (row) containers, which has the effect you want. Note: I also used fixed (percentage) width settings on the child elements to achieve this.

.col {
  display: flex;
  margin-bottom: 10px;
}

.col>div {
  width: 31%;
  margin: 1%;
  background: #ddd;
}

<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>

Hiya. Thanks for the response. Unfortunately, it can't be arranged into rows, since each `.col` is going to be a post in the archive page of a WordPress theme; the child elements would be the thumbnail, meta info and excerpt, so it would look very strange to have it going horizontally. — M. Salman Khan, Oct 26 '17 at 00:02

Obsidian Age · Answer 4 · 2017-10-25T23:53:50.923

This can be accomplished with flexbox, though note that it isn't fully supported in Internet Explorer 11.

First, replace your float: left on .col with display: flex.
Second, move your margin-top: 1em declarations to .col.

* {
  font-family: Helvetica, sans-serif;
}

h2 {
  text-align: center;
  clear: both;
  padding-top: 2em;
}

.col {
  display: flex;
  margin-top: 1em;
  background-color: #ebebeb;
}
.col div {
  padding: 1em;
  width: 80%;
  margin: 0 auto;
}
.col .sectionOne {
  background-color: #2b2b2b;
  color: #fff;
}
.col .sectionTwo {
  background-color: #5f5f5f;
  color: #fff;
}
.col .sectionThree {
  background-color: #8c8c8c;
  color: #fff;
}

<h2>Everything Aligned. The world is a happy place.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>


<h2>Misaligned. Chaos descends.</h2>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus
    et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>
<div class="col">
  <div class="sectionOne">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum
    dolor sit amet, consectetur adipiscing elit.
  </div>
  <div class="sectionTwo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
  </div>
  <div class="sectionThree">
    Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
  </div>
</div>

Note that flexbox doesn't have collapsing margins or anything like border-spacing for tables. This can be resolved by setting margin on .col div, though you may want to change the background.

Also, your use of the name .col is counter-intuitive, as you actually have three sections per row. You might want to watch out for that!

Hope this helps! :)

Hiya Obsidian Age, thanks for the response. That was the closest that I got as well, but it wouldn't work for me because that changes columns into rows. — M. Salman Khan, Oct 25 '17 at 23:58
You **appear** to already be using rows, but either way, you definitely *should* be using rows. You can fiddle with `flex-direction` to have your sections display int the order you would like (it's a bit hard to work out what that is with only placeholder text), but in general you should be sorting from top-to-bottom, and that must be done with rows :) — Obsidian Age, Oct 26 '17 at 00:04
Hiya, It wouldn't work for me to use rows instead of columns, since each `.col` represents a post in the archive page of a Wordpress theme. The sections would be the featured image, the post excerpt and the post meta information, so it wouldn't make sense to arrange this horizontally. I'll edit this into the question. — M. Salman Khan, Oct 26 '17 at 00:07

Michael Benjamin · Answer 5 · 2017-11-04T16:44:19.870

Here's a simple solution using CSS Grid Layout.

Features:

all rows are the height of the tallest element in the row
the elements flow in columns, not rows
extra HTML containers can be removed
the code is simple and efficient

codepen

body {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  grid-gap: 1em;
  padding: 1em;
}

.sectionOne   { background-color: #2b2b2b; }
.sectionTwo   { background-color: #5f5f5f; }
.sectionThree { background-color: #8c8c8c; }
div           { padding: 1em; color: #fff; }

<div class="sectionOne">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
  Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
  Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>
<div class="sectionOne">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="sectionTwo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis sem interdum, aliquam magna non, vestibulum nibh. Curabitur in eros ornare, ultricies tellus et, venenatis dolor. Curabitur in eros ornare, ultricies tellus et, venenatis dolor.
</div>
<div class="sectionThree">
  Cras eget lectus non dolor congue dapibus in id massa. Nullam porta est accumsan lacinia tempus. Curabitur convallis ex nec vestibulum semper. Vivamus lorem
</div>

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
IE11 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid

Hiya, thanks for the suggestion. Someone else also suggested this, and whilst it does do exactly what I want, browser compatibility is quite bad for it, so I don't think it's really usable *at the moment*. — M. Salman Khan, Oct 26 '17 at 00:25
They are two different solutions, but use the same technology. Also, check browser support I posted at the bottom. Edge will be available soon. — Michael Benjamin, Oct 26 '17 at 00:27
Ahh, sorry, I didn't see that difference. That being said, support for both is the same, so even with Edge support. there are still many others that don't support it, so I don't think I could really use it-especially since the blog this is for is biggest in Indonesia, where UC browser is very commonly used. Thanks for the suggestion though; perhaps I'll be able to switch to this in a years time. — M. Salman Khan, Oct 26 '17 at 00:39

Make column elements equal height on each row

5 Answers5