Equal height multi column/multi element layout with only CSS

Question

I'd like to see if someone knows a trick to achieve this problem, using only CSS:

Say I have a two, three or four column layout (the number is dynamic), each one of these columns will have 5 different sections inside, and each one of these sections will have a variable amount of content.

Is it possible to vertically align each one of the sections with the sibling columns' sections even if their content is not the same height, using only CSS (instead of a JS equalizer solution)?

I know this would be quite easy with a table, but I have to completely switch the layout to rows if there are more than four items.

I was trying to use Flexbox but haven't achieved the desired result, and I'm not sure I can use Grid with a variable amount of columns.

I was trying to do it using Flexbox as shown in the Codepen https://codepen.io/ramonlapenta/full/gowLqw/

With the reasoning of being able to make each section grow equally (stretch) in the available space, since the .item-compare div is already stretched to the same height as its siblings, but this is not working because the growing/shrinking properties refer to the available space, not to the content of the items.

show us what you have done so far with flexbox so we can help you ... i advice you to do it fast before getting a bunch of downvotes — Temani Afif, Dec 21 '17 at 21:16
It is possible with grids but you have to show us your work, we can try to help you from there. — , Dec 21 '17 at 21:17
To use CSS Grid you would have to have a single container so the HTML structure would have to be completely different. You actually have tabular data here so a `table` would be the most semantic option. TBH..JS is probably the optimal non-table solution. — Paulie_D, Dec 21 '17 at 21:40
Yeah, for applying either grid or flex the whole structure would have to be modified to produce the layout you require. unless you specify a fixed height for the sections which I presume you don't want. — , Dec 21 '17 at 21:49
Could you give me some pointer about modifying the HTML structure? I have full control over it, so it may be possible. I just have to consider the event of having more than four items in which I have to present them as rows instead of columns (reason for not using a table). I think as far as the items are logically/semantically grouped I should be able to modify as needed. Thanks for having a look — ramono, Dec 21 '17 at 21:55
this might help: https://stackoverflow.com/a/46890585/703717 — Danield, Dec 21 '17 at 22:40
I have provided 3 dupe links that does that, and explain how it needs to be done. — Asons, Dec 22 '17 at 07:12
Some of the answers on those links may work, Sorry I couldn't find that before. Thanks. — ramono, Dec 22 '17 at 13:29

Paulie_D · Answer 1 · 2017-12-21T22:16:14.343

This is possible using CSS Grid but you would have to have a single container so the HTML structure would have to be completely different.

Something like:

Which does have some logic to it...

This works automagically because there are only 3 sets of items so repeat(3, 1fr) is a magic number.

For a more dynamic method there are autofit options.

Also, you can define which grid-row each class will sit on..such as:

.item-compare-title {
 grid-row:2;
}

etc.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1em;
  width: 95%;
  margin: auto;
}

.container>div {
  border: 1px solid grey;
}

.item-compare-img img {
  max-width: 100%;
  height: auto;
}

.item-compare-title {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.item-compare-model {
  margin-top: auto;
}

<div class="container">
  <div class="item-compare-img">
    <img src="http://www.cagpurification.com/images/sce/product_images/Chiller%20Picture%201.jpg" alt="Chiller">
  </div>
  <div class="item-compare-img">
    <img src="http://www.cagpurification.com/images/sce/product_images/Chiller%20Picture%201.jpg" alt="Chiller">
  </div>
  <div class="item-compare-img">
    <img src="http://www.cagpurification.com/images/sce/product_images/Chiller%20Picture%201.jpg" alt="Chiller">
  </div>
  <div class="item-compare-title">
    <h4>Ecodan Heatpump that pumps heat out to the world</h4>
    <div class="item-compare-model">
      <p>PUHZ-W682387H / 5KW</p>
    </div>
  </div>
  <div class="item-compare-title">
    <h4>Ecodan Heatpump</h4>
    <div class="item-compare-model">
      <p>PUHZ-W682387H / 5KW</p>
    </div>
  </div>
  <div class="item-compare-title">
    <h4>Ecodan Heatpump</h4>
    <div class="item-compare-model">
      <p>PUHZ-W682387H / 5KW</p>
    </div>
  </div>
  <div class="item-compare-feat">
    <ul class="list-compare-feat">
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
    </ul>
  </div>
  <div class="item-compare-feat">
    <ul class="list-compare-feat">
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here with a longer title for testing</li>
      <li class="compare-feat-item">USP / Feature goes here another long title</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
    </ul>
  </div>
  <div class="item-compare-feat">
    <ul class="list-compare-feat">
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
      <li class="compare-feat-item">USP / Feature goes here</li>
    </ul>
  </div>
  <div class="item-compare-attr">
    <ul class="list-compare-attr">
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Net dimensions</span>
        <span class="compare-attr-value">154 x 558 x 557 mm</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Cooling capacity</span>
        <span class="compare-attr-value">3.4 kW</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">ErP Rating</span>
        <span class="compare-attr-value">A+++ / A+++</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
    </ul>
  </div>
  <div class="item-compare-attr">
    <ul class="list-compare-attr">
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Net dimensions</span>
        <span class="compare-attr-value">154 x 558 x 557 mm</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Cooling capacity</span>
        <span class="compare-attr-value">3.4 kW</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
    </ul>
  </div>
  <div class="item-compare-attr">
    <ul class="list-compare-attr">
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Net dimensions</span>
        <span class="compare-attr-value">154 x 558 x 557 mm</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Cooling capacity</span>
        <span class="compare-attr-value">3.4 kW</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">ErP Rating</span>
        <span class="compare-attr-value">A+++ / A+++</span>
      </li>
      <li class="compare-attr-item even">
        <span class="compare-attr-title">Noise Level</span>
        <span class="compare-attr-value">23 dB</span>
      </li>
      <li class="compare-attr-item odd">
        <span class="compare-attr-title">Something</span>
        <span class="compare-attr-value">655</span>
      </li>
    </ul>
  </div>
</div>

Codepen.io demo

Interesting (the Pen doesn't load on my Chrome for some reason), I may be able to do this, but still unsure about dynamically changing `grid-template-columns: repeat(3, 1fr);` to be 2 or 4 as required. — ramono, Dec 21 '17 at 22:13

Equal height multi column/multi element layout with only CSS

1 Answers1