German version

With CSS Grid Layout it is very easy to design content boxes with the same height over any number of rows. All you need is only one simple line of code. In this small article I will show you this magic line. All the other styles to design attractive cards or eyecatching image galleries it's up to you.

Code Basics

Honestly said there are some more code blocks to create – or to copy and paste!

The code for the equal height boxes with CSS Grid Layout is based on a work I did before; you can find this article here:

• How to Create an Image Gallery with CSS Grid Layout

The HTML Structure

The HTML code consists of a grid frame and a box containing the actual content:

HTML Code
<div class="auto-grid">
  <div class="grid-box">
    ...
  </div>
</div>

The CSS Code

The crucial CSS code is the following, which I copied from the above mentioned article and adapted slightly:

CSS Code
/* First the Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-gap: 1.5rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}

Interim Result

As you can see in the example below, the columns in one row are the same height, at the same time the columns in the second row are higher than those in the first.

The Decisive Code

Now I put only one more line of code in the above snippet to get equal height columns for all the boxes I want to create.

CSS Code
/* Added code */
.gallery-grid {
  ...
  grid-auto-rows: 1fr;
}

Result

Now all columns, whether in the first or second row, have the same height.

Some Improvements

Basically, this is already enough. But if there is i.e. on smaller screens only one column we really do not need the same height for all the boxes. So let's insert a media query to let the feature start only when there are two or more columns side by side.

CSS Code
/* Media query */
@media screen and (min-width: 16rem) {
  .gallery-grid {
    grid-auto-rows: 1fr;
  }
}

Some Flexbox Code

But what if we have a box with a long text and a box with only a short text and we want to put a button at the bottom of the two boxes?

To solve this problem we need a little bit of CSS Flexbox code. The wrapper for all the boxes is the div with the class .auto-grid; the content is located in the div with the class .grid-box; and the button element is a child of the grid-box.

First I declare the grid-box container as a flexbox container:

CSS Code
/* CSS Flexbox */
.grid-box {
  display: flex;
  flex-flow: column nowrap;
  ...
}

Then I create the class .m-top, add margin-top: auto in the class (so I can use it for other elements as well) and give the button element just this class:

CSS Code
/* Place elements at the bottom */
.m-top {
  margin-top: auto;
}

Well, that may be enough. Get the code and make your own wonderful thing out of it, have fun with it.

--> Click here for the demo site.

--> Here you can download the complete code of the demo site.

In the ZIP file you will find the HTML file and the CSS file for the equal height columns with CSS Grid Layout.