What is the use of fr units in Grid?

Q: What is the use of fr units in Grid?

In CSS Grid, the `fr` unit stands for *fractional unit*. It represents a portion of the available space in the grid container. Using `fr` makes it easy to create flexible, responsive layouts that automatically distribute space among grid columns or rows. 1fr represents one fraction of the available space in the grid container. You can combine `fr` with fixed units like `px` or `%` to create mixed layouts. If you define multiple columns with `fr`, the available space is divided proportionally. `fr` units make layouts responsive without needing to calculate widths manually. .container { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; } .item { background-color: #ff9800; color: white; padding: 20px; text-align: center; font-weight: bold; } 1fr 2fr 1fr

Difficulty: 3/10

fr unit sizing, grid layout responsiveness, fractional unit vs percentage

Understanding fr Units in CSS Grid

In CSS Grid, the fr unit stands for fractional unit. It represents a portion of the available space in the grid container. Using fr makes it easy to create flexible, responsive layouts that automatically distribute space among grid columns or rows.

Key Points

1
1fr represents one fraction of the available space in the grid container.
2
You can combine fr with fixed units like px or % to create mixed layouts.
3
If you define multiple columns with fr, the available space is divided proportionally.
4

Example: Using fr Units for Flexible Columns

Scenario Questions

0-2 years experience

Follow-up Questions