The FR Unit
fr (fraction) is a unit exclusive to CSS Grid. It represents a fraction of the available free space in the grid container — after fixed-size tracks are accounted for. sdfsdfs
1. What is 1fr?
1fr means 'take 1 share of the remaining space'. If you have 3 columns all set to 1fr, they share the space equally — each gets 1/3.
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* each column = 1/3 of available width */
}2. Unequal FR Values
Different fr values create proportional columns. 2fr gets twice as much space as 1fr. Think of it like dividing a pie: 1fr 2fr 1fr divides the space into 4 equal parts, then gives 1, 2, and 1 parts.
CSS
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
/* total = 4 parts: col1=25%, col2=50%, col3=25% */
}3. fr Mixed with Fixed Units
When you mix fr with fixed units (px, em, %), the fixed tracks are sized first. The remaining space is then distributed among fr tracks. This is the key power of fr.
CSS
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
/* 1. reserve 150px for col 1 */
/* 2. divide rest: col2=1/3, col3=2/3 */
}4. fr vs Percentages
Percentages are calculated from the container width including gap space, so gap can cause overflow. FR units are calculated from the free space AFTER gaps, so they never overflow.
CSS
/* ❌ Percentage — gap causes overflow */
.bad {
grid-template-columns: 33% 33% 33%;
gap: 8px; /* 99% + 16px > 100% */
}
/* ✅ FR — gap-aware, never overflows */
.good {
grid-template-columns: 1fr 1fr 1fr;
gap: 8px; /* fr takes remaining space */
}5. FR for Row Tracks
fr works for rows too — but only when the grid container has an explicit height. Otherwise rows have no free space to distribute.
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
height: 200px; /* required for fr rows! */
}