Q13: How does the fr (Fractional) unit work in CSS Grid?
The fr unit represents a fraction of available free space in grid containers. Free space is calculated after allocating fixed pixel or percentage dimensions, allowing responsive grid columns to expand and contract proportionally.
Fractional Column Distribution
.grid {
display: grid;
/* Column 1 takes 200px; remaining space splits 1:2 between columns 2 and 3 */
grid-template-columns: 200px 1fr 2fr;
}💡 After allocating 200px, remaining space splits into 3 parts: col 2 gets 1/3, col 3 gets 2/3.
Key Takeaways
frdistributes remaining unallocated space inside grid containers.- Combines seamlessly with
repeat()andminmax()functions.
Knowledge Check
In a 900px wide grid with grid-template-columns: 1fr 2fr, how wide is the second column?