CSS Grid: Percentage vs. `fr` Units: What's the Difference?

The Difference Between Percentage and fr Units in CSS Grid Layout

When using fr units, the free space in the container is distributed equally among the columns. The grid-column-gap property is not a factor.

However, when using %, the container is divided into a number of columns, each having a width determined by the percentage. Both the column lengths and grid gaps are factored into the width.

This can lead to overflow if the total width of the columns and gaps exceeds the width of the container.

To avoid overflow, you can use the calc() function to subtract the width of the grid gaps from the width of each column.

The above is the detailed content of CSS Grid: Percentage vs. `fr` Units: What's the Difference?. For more information, please follow other related articles on the PHP Chinese website!