Flexbox & Grid Playground
Interactive CSS layout builder with live preview and code export
Flexbox
CSS Grid
Container
flex-direction
row
row
row-reverse
column
column-reverse
flex-wrap
nowrap
nowrap
wrap
wrap-reverse
justify-content
flex-start
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
stretch
stretch
flex-start
flex-end
center
baseline
align-content
stretch
stretch
flex-start
flex-end
center
space-between
space-around
gap
8px
Children
5
Child
#1
flex-grow
0
flex-shrink
1
flex-basis
auto
order
0
align-self
auto
auto
flex-start
flex-end
center
stretch
baseline
Preview
Copy CSS
Export HTML
Container
grid-template-columns
grid-template-rows
gap
8px
justify-items
stretch
stretch
start
end
center
align-items
stretch
stretch
start
end
center
justify-content
start
start
end
center
space-between
space-around
space-evenly
align-content
start
start
end
center
space-between
space-around
space-evenly
grid-auto-flow
row
row
column
row dense
column dense
Children
6
Child
#1
grid-column
grid-row
justify-self
auto
auto
stretch
start
end
center
align-self
auto
auto
stretch
start
end
center
order
0
Preview
Copy CSS
Export HTML
Copied to clipboard!