Flexbox & Grid
Build CSS Flexbox and Grid containers visually — tweak direction, alignment, wrapping, columns, and gap, watch a live preview update, and copy the generated CSS.
1
2
3
4
5
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
1
2
3
4
5
6
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
justify-items: stretch;
align-items: stretch;