Align items with different heights in a grid and have them match lines of alignment

Question

I want to create a page where my elements are displayed in a Grid. I want to align the items by line. I want to achieve visually the following result, but I don't know how: https://codepen.io/shirkit/pen/KvZKOE/

And I currently have this:

var back = ["red","blue","gray","black","green","cyan","brown","magenta"];
var i = 0;

$('#container .card').children().each(function() {
 $(this).css('background-color',back[i++]);
 if (i == back.length) i = 0;
});

#container {
 display: flex;
 flex-direction: row;
}

.card {
 max-width: 200px;
  width: 100%;
}

.card .image {
 height: 150px;
}

.card .text {
 height: 100px;
}

.card .list {
 height: 50px;
}

#z1 .image {
  height: 175px;
}

#z2 .text {
  height: 120px;
}

#z3 .list {
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
 <div id="z1" class="card">
  <div class="image"></div>
  <div class="text"></div>
  <div class="list"></div>
 </div>
 <div id="z2" class="card">
  <div class="image"></div>
  <div class="text"></div>
  <div class="list"></div>
 </div>
 <div id="z3" class="card">
  <div class="image"></div>
  <div class="text"></div>
  <div class="list"></div>
 </div>
</div>

Clarification: the heights on the ID selectors #z1 .image, #z2.text #z3 .list are there just for simulating the height that the components would have. Therefore, it's NOT an option to change those values. Also note that height values of those elements/containers are not known in advance, so setting margin is also NOT an option.

The current code shown is not how it's currently, it's just for show how visually currently looks, but it should follow that structure, a container for everything, a card for the element and the items inside the card.

Now I know how to do this if I don't put the items in the .card element, and then using the CSS display: grid in #container. I would have the elements .image/.text/.list as direct children from #container, but this is the last resort, I wanted an alternative.

I'm currently looking for a solution that allows for me to keep the .card elements, and have possible fallbacks.

Edit: The proposed answers that were marked as duplicates does not solves the issue I presented here, or I haven't found any others related.

Answer 1

Use a masonry layout for this, e.g. https://masonry.desandro.com/. It will help achieve the layout below with a bit of JS. Using pure CSS may not achieve a fully-cross browser solution, especially if you try using flexbox

Answer 2

Instead of below code

<style type="text/css">
#z1 .image {
  height: 175px; 
}
#z2 .text {
  height: 120px;
}
#z3 .list {
  height: 60px;
}
</style>

Use this code

<style type="text/css">
#z1 .image {
  height: auto; 
}
#z2 .text {
  height: auto;
}
#z3 .list {
  height: auto;
}
</style>

Answer 3

#container {
 display: flex;
 flex-direction: row;
}

.card {
 max-width: 200px;
  width: 100%;
}

#z2  .image {
 height: 150px;
 max-height: 175px;
 margin-bottom:25px;
}
#z3  .image {
 height: 150px;
 max-height: 175px;
 margin-bottom:25px;
}
#z1 .text {
 height: 100px;
 margin-bottom:20px;
}
#z3 .text {
 height: 100px;
 margin-bottom:20px;
}
.card .list {
 height: 50px;
}

#z1 .image {
  height: 175px;
}
#z2 .image{

}

#z2 .text {
  height: 120px;
}

#z3 .list {
  height: 60px;
}

This is the css for your desired output. But u should use the jquery its recomended You wanted pure css this is it.

Answer 4

With your current HTML structure, I'm not familiar with any pure CSS ways of achieving your end result. The key issue is that the individual elements in each adjacent column have no way of relating themselves to their surroundings. If your cells were horizontal, we might be able to use CSS like table-row - because "cells are descendants of rows, never of columns." (W3)

With that said, you didn't mention you were looking for a pure CSS solution, and as you already are using jQuery, I thought that would be a fine solution for keeping your HTML structure while achieving your desired layout.

In the code below I'm iterating through each set of components (image, text, list) to determine which card has the tallest one for each, then spacing out the other cards using margin-bottom on each of those shorter components to make them equal.

var back = ["red", "blue", "gray", "black", "green", "cyan", "brown", "magenta"];
var i = 0;

$('#container .card').children().each(function() {
  $(this).css('background-color', back[i++]);
  if (i == back.length) i = 0;
});

var components = ['image', 'text', 'list'];
$.each(components, function(i, j) {
  var $elements = $('.card .' + j);
  var heights = [];
  var tallest = 0;

  $elements.each(function(i) {
    var height = $(this).height();
    heights[i] = height;
    if (height > tallest) {
      tallest = height;
    }
  });

  $.each(heights, function(i, j) {
    var diff = tallest - j;
    if (diff) {
      $elements.eq(i).css('margin-bottom', diff);
    }
  });
});

#container {
  display: flex;
}

.card {
  max-width: 200px;
  width: 100%;
}

.card .image {
  height: 150px;
}

.card .text {
  height: 100px;
}

.card .list {
  height: 50px;
}

#z1 .image {
  height: 175px;
}

#z2 .text {
  height: 120px;
}

#z3 .list {
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="z1" class="card">
    <div class="image"></div>
    <div class="text"></div>
    <div class="list"></div>
  </div>
  <div id="z2" class="card">
    <div class="image"></div>
    <div class="text"></div>
    <div class="list"></div>
  </div>
  <div id="z3" class="card">
    <div class="image"></div>
    <div class="text"></div>
    <div class="list"></div>
  </div>
</div>