Setting equal height columns in CSS Grid layouts

March 9, 2019, 1:16 pm
Author: James Griffiths

To set equal height columns in CSS Grid layouts simply add the following rule to the grid container:

grid-auto-rows: 1fr;

This sets the height for each row based on the tallest content element within the container (this maximum size is then determined and represented as the fr (fractional) unit value of 1).

With this one addition equal height rows are now a reality in your CSS Grid layouts.

Nice huh?


« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.