Grid Playground
Interactive CSS Grid Layout Explorer
1
2
3
4
5
6
7
8
9
Controls
Grid Items
Number of Items
Update
Template Columns
3 Equal Columns
repeat(3, 1fr)
4 Equal Columns
repeat(4, 1fr)
Auto-Fit Responsive
repeat(auto-fit, minmax(150px, 1fr))
Varied Widths
1fr 2fr 1fr
Custom Columns
Apply
Template Rows
Auto Rows
grid-auto-rows: auto
Fixed Height
grid-template-rows: repeat(3, 150px)
Min-Max
grid-auto-rows: minmax(100px, auto)
Custom Rows
Apply
Gap
Small Gap
gap: 10px
Medium Gap
gap: 20px
Large Gap
gap: 40px
No Gap
gap: 0
Custom Gap (px)
20px
Align Items
Start
align-items: start
Center
align-items: center
End
align-items: end
Stretch
align-items: stretch
Justify Content
Start
justify-content: start
Center
justify-content: center
End
justify-content: end
Space Between
justify-content: space-between
Auto Flow
Row
grid-auto-flow: row
Column
grid-auto-flow: column
Dense
grid-auto-flow: dense
Special Layouts
Masonry Style
varied heights + auto-fit
Holy Grail
header + sidebar + main + footer
Dashboard
card-based layout
Reset
back to default
Current CSS Code
display:
grid
;
grid-template-columns:
repeat(3, 1fr)
;
gap:
20px
;