CSS Studio
Interactive Learning
On this tool
A single 1fr column is just a stack. Add more than one column, such as 1fr 1fr, before the grid is visible as a grid.
CSS Grid
Columns and rows define tracks. Gap is the space between tracks, not inside an item.
What people get wrong
A single 1fr column is just a stack. Add more than one column, such as 1fr 1fr, before the grid is visible as a grid.
- When should I use Grid instead of Flexbox?
- Use Grid when you are designing in two directions at once. Use Flexbox for one row or one column of items.
- What does 1fr mean in CSS Grid?
- 1fr is one share of the free space in that direction. 1fr 2fr makes the second track twice as wide as the first, after gaps are subtracted.
Grid Template
3
2
10px
Generated CSS
From the controls
Loading...
Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6