CSS Grid Heights

One of the most common bug bears when dealing with CSS grid heights is how we ensure the height of each grid item stays consistent when each item contains varying degrees of content.

As an example, below shows basic HTML markup of a row of items.

<!DOCTYPE html>
<html>
<body>
    <ul class="grid">
        <li class="item">
            <img src="http://via.placeholder.com/200x200">
            <h2>Item One</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
        </li>
        <li class="item">
            <img src="http://via.placeholder.com/200x200">
            <h2>Item One</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </li>
        <li class="item">
            <img src="http://via.placeholder.com/200x200">
            <h2>Item One</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        </li>
        <li class="item">
            <img src="http://via.placeholder.com/200x200">
            <h2>Item One</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        </li>
    </ul>
    <style>
        ul.grid {
            display: inline-block;
            list-style-type: none;
        }
        ul.grid li {
            float: left;
            width: 25%;
        }
    </style>
</body>
</html>

CSS Grid Heights

Even though the row has different heights cause by the varying amount of content, there is only one row, and so nothing appears out of the ordinary.

However, when introducing a second row of grid items, the items do not line up correctly, even if the second row of items have exactly the same height.

CSS Grid Heights

To resolve this issue, you could add the following jQuery code which will work out the height of the item with most content, and set this height for the rest of the items.

<!DOCTYPE html>
<html>
<body>

    ....

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var gridItems = jQuery('ul.grid li');
        if (gridItems.length > 1) {      
            var height = 0;
            gridItems.each(function () {
                if (jQuery(this).outerHeight(true, true) > height) {
                    height = jQuery(this).outerHeight(true, true);
                }
            }).promise().done(function () {
                jQuery(this).height(height);
            });
        }
    </script>
</body>
</html>

This solution will look at all grid items on all rows, so what you might want to do is calculate the height for each row.

This will require a change of markup to the grid HTML.

<ul class="grid">
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
    </li>
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </li>
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    </li>
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </li>
</ul>
<ul class="grid">
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
    </li>
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
    </li>
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
    </li>
    <li class="item">
        <img src="http://via.placeholder.com/200x200">
        <h2>Item One</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
    </li>
</ul>

Then, modify the jQuery code.

<script type="text/javascript">
    var grid = $('ul.grid');
        
    grid.each(function(){
        var height = 0;
        var gridItems = $(this).children('li');
            
        if (gridItems.length > 1) {
            $(gridItems).each(function(){
                if ($(this).outerHeight(true, true) > height) {
                    height = jQuery(this).outerHeight(true, true);
                }
            }).promise().done(function () {
                jQuery(this).height(height);
            });
        }
    })</script>

CSS Grid Heights

Equalising row item heights is a common problem in web development, and so there are many alternative than using the jQuery solution above. You can use pure JavaScript, or even use libraries built specifically for resolving the problem such as matchHeight.js and equalize.js.