Equal Height Elements: Flexbox vs. Grid

This is the second post in a series examining modern CSS solutions to problems I’ve been solving over the last 13+ years of being a frontend developer.

Once upon a time (approximately 7 years ago), I wrote a jQuery plugin to calculate equal height c…


This content originally appeared on Modern CSS Solutions for Old CSS Problems and was authored by Stephanie Eckles

This is the second post in a series examining modern CSS solutions to problems I've been solving over the last 13+ years of being a frontend developer.

Once upon a time (approximately 7 years ago), I wrote a jQuery plugin to calculate equal height columns. It ensured that the very specific scenario of a row with three columns would keep the content boxes equal height no matter the length of the content they contained. The dominant layout method at the time - floats - did not handle this problem.

Flexbox Solution#

When flexbox arrived on the scene, this became possible with:

.flexbox {
display: flex;
}

Amazing! By default, direct children line up in a row and have a "stretch" applied so they are equal height ?

But then you add two .column divs as children and... the contents of the columns appear unequal again ?

The fix is:

.flexbox {
display: flex;

// Ensure content elements fill up the .column
.element
{
height: 100%;
}
}

Now the columns will appear equal height and grow with the content of .element.

Grid Solution#

With grid, we encounter similar behavior:

.grid {
display: grid;
// Essentially switch the default axis
grid-auto-flow: column;
}

Similar to flexbox, direct children will be equal height, but their children need the height definition added just like in the flexbox solution:

.grid {
display: grid;
grid-auto-flow: column;

// Ensure content elements fill up the .column
.element
{
height: 100%;
}
}

Here's a demo of both solutions, as well as additional demos for defining a set amount of columns per row as described below:

By Stephanie Eckles (@5t3ph)

Which is Better?#

For purely solving for equal height elements, the advantage of flexbox is the default axis immediately enables side-by-side columns, whereas grid needs to be explicitly set. However, elements will not inherently be equal-width as well (which may be an advantage depending on type of content, for example navigation links).

The advantage of grid is inherently equal-width elements if that is desirable. An additional advantage is when you don't want auto-flow but instead want to define a set max number of columns per "row". In this case, grid layout easily handles the math to distribute the columns vs. a flexbox solution requiring defining the calculation to restrict the number of columns.

Updating our .grid solution to handle for defining a max number of 3 .column per row is as simple as:

&.col-3 {
grid-gap: $col_gap;
grid-template-columns: repeat(3, 1fr);
}

Whereas one (very basic) option for flexbox would be:

$col_gap: 1rem;

.flexbox.col-3
{
// Explicitly needs to be defined to wrap
// overflow items to the next virtual row
flex-wrap: wrap;

.column
{
// "hack" for no gap property
margin: $col_gap/2;
// define calculation for browser to use on the width
max-width: calc((100% / 3) - #
{$col_gap});
}
}

You would also need to consider how these solutions are handled responsively, but that's a bit out of scope of this article :)


This content originally appeared on Modern CSS Solutions for Old CSS Problems and was authored by Stephanie Eckles


Print Share Comment Cite Upload Translate
APA
Stephanie Eckles | Sciencx (2023-02-04T21:40:31+00:00) » Equal Height Elements: Flexbox vs. Grid. Retrieved from https://www.scien.cx/2020/04/09/equal-height-elements-flexbox-vs-grid/.
MLA
" » Equal Height Elements: Flexbox vs. Grid." Stephanie Eckles | Sciencx - Thursday April 9, 2020, https://www.scien.cx/2020/04/09/equal-height-elements-flexbox-vs-grid/
HARVARD
Stephanie Eckles | Sciencx Thursday April 9, 2020 » Equal Height Elements: Flexbox vs. Grid., viewed 2023-02-04T21:40:31+00:00,<https://www.scien.cx/2020/04/09/equal-height-elements-flexbox-vs-grid/>
VANCOUVER
Stephanie Eckles | Sciencx - » Equal Height Elements: Flexbox vs. Grid. [Internet]. [Accessed 2023-02-04T21:40:31+00:00]. Available from: https://www.scien.cx/2020/04/09/equal-height-elements-flexbox-vs-grid/
CHICAGO
" » Equal Height Elements: Flexbox vs. Grid." Stephanie Eckles | Sciencx - Accessed 2023-02-04T21:40:31+00:00. https://www.scien.cx/2020/04/09/equal-height-elements-flexbox-vs-grid/
IEEE
" » Equal Height Elements: Flexbox vs. Grid." Stephanie Eckles | Sciencx [Online]. Available: https://www.scien.cx/2020/04/09/equal-height-elements-flexbox-vs-grid/. [Accessed: 2023-02-04T21:40:31+00:00]
rf:citation
» Equal Height Elements: Flexbox vs. Grid | Stephanie Eckles | Sciencx | https://www.scien.cx/2020/04/09/equal-height-elements-flexbox-vs-grid/ | 2023-02-04T21:40:31+00:00
https://github.com/addpipe/simple-recorderjs-demo