How Can CSS Grid Achieve Equal Height Rows While Flexbox Can't?

Equal Height Rows in CSS Grid Layout

Using Flexbox to achieve equal height rows is impractical since row heights can only accommodate the elements they contain. However, CSS Grid offers a solution.

The Principle

To create a grid with equal height rows, setting all rows to grid-auto-rows: 1fr is the key.

The Technique

The fr unit in Grid Layout allocates space evenly based on the available free space within the container. When applied to rows (grid-auto-rows: 1fr), every row claims an equal portion of that free space.

The Reason Behind the Magic

Grid Layout specifications state that when dealing with a flexible-sized (indefinite height) grid, grid tracks (rows) adopt the height of their contents. The tallest item in each row determines the height of all rows. This maximum height becomes the length for 1fr, leading to equal row heights.

Why Flexbox Won't Cut It

Flexbox only allows equal height rows within the same row, making it unsuitable for cross-row equalization. According to the Flexbox specification, in multi-line containers, line height is determined by the minimum height required to accommodate its flex items.

The above is the detailed content of How Can CSS Grid Achieve Equal Height Rows While Flexbox Can't?. For more information, please follow other related articles on the PHP Chinese website!