✨ CSS Layout Lab
Watch Flexbox & Grid come alive — change values, see magic happen
Flexbox
Grid
Live Preview
1
2
3
4
5
6
flex-direction
row
column
row-reverse
column-reverse
justify-content
flex-start
center
flex-end
space-between
space-around
space-evenly
align-items
stretch
flex-start
center
flex-end
baseline
gap
10
px
flex-wrap
nowrap
wrap
wrap-reverse
grid-template-columns
repeat(2, 1fr)
repeat(3, 1fr)
repeat(4, 1fr)
1fr 2fr
2fr 1fr 1fr
100px 1fr
auto-fit minmax(80, 1fr)
grid-template-rows
auto
80px
repeat(2, 80px)
1fr 1fr
justify-items
stretch
start
center
end
align-items
stretch
start
center
end
gap
10
px
.container {
Copy CSS
}
☕ Java
Adjust the controls and watch the tiles move in real time!
Next tip ›
Hide
☕