ARTICLE AD BOX
How Grid differs from Flexbox
In flexbox, flex-shrink controls how items compete for negative free space (shrinking). In Grid, the fr unit only distributes positive free space—it doesn't define shrink ratios.
What happens with fr units
.grid {
display: grid;
grid-template-columns: 2fr 1fr 2fr;
}
This distributes available space in a 2:1:2 ratio, but:
All columns shrink to their min-content equally when space runs out
There's no proportional shrinking like flexbox provides
Workarounds
1. Use minmax() with a calculated minimum:
.grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
}
This allows columns to shrink to 0, maintaining the 2:1:2 ratio down to very small sizes. However, content may overflow.
2. Use percentage-based minimums:
.grid {
display: grid;
grid-template-columns:
minmax(calc(40% - 10px), 400px)
minmax(calc(20% - 10px), 1fr)
minmax(calc(40% - 10px), 400px);
}
3**. Stick with Flexbox** (recommended for this use case)
Your current flexbox solution is actually the right tool for this job. Flexbox was designed for 1D distribution with shrink/grow ratios:
.container {
display: flex;
}
.side { flex: 0 1 400px; } /* shrink ratio 1 */
.middle { flex: 1 1 200px; } /* shrink ratio 1, can grow */
If you need a 2:1:2 shrink ratio specifically:
.side { flex: 0 2 400px; } /* shrink ratio 2 */
.middle { flex: 1 1 200px; } /* shrink ratio 1, can grow */
TL;DR
CSS Grid lacks a grid-shrink property. For proportional shrinking behavior like you described, flexbox is the correct choice. Grid excels at 2D layouts, but flexbox is better suited for 1D content distribution with specific shrink ratios.
