Back to home

Flexbox & Grid Playground

Tune direction, wrap, alignment and gap visually, then copy the layout CSS

Layout
Direction
Wrap
Justify
Align
Gap12px
1
2
3
4
5
CSS
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;

The boxes have different heights so align-items is visible; grid mode uses repeat(N, 1fr) for equal columns.