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

What's the Difference Between Percentage and fr Units?

When using CSS Grid Layout, there are two common units for defining the width of columns: percentages (%) and fr units. While both units can be used to create a flexible grid layout, they behave differently in certain situations.

Percentage Units (%)

Percentage units are a relative unit that refers to the container's width. For example, a column with a width of 50% will take up half of the container's width. Percentage units are often used to create fixed-width columns.

However, percentage units can cause problems when the container's width is not explicitly defined. For example, if the container has a width of auto, the column will grow or shrink to fit the available space. This can lead to unwanted behavior, especially in responsive designs.

fr Units

fr units are a relative unit that refers to the available free space in the container. For example, a column with a width of 1fr will take up one equal part of the free space in the container. fr units are often used to create flexible columns that automatically adjust to the available space.

fr units are not affected by the container's width. For example, if the container has a width of auto, the column will still take up one equal part of the free space. This makes fr units ideal for creating responsive grid layouts.

Conclusion

Percentage units are useful for creating fixed-width columns, while fr units are useful for creating flexible columns. When choosing which unit to use, it is important to consider the desired behavior of the column.

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