🍱 Layout Generator

CSS Flexbox & Grid Layout Playground

Interactively adjust flex direction, alignment, grid template columns, and gaps with visual live preview and instant CSS export.

Live Layout Container

Item 1

Item 2

Item 3

Item 4

flex-direction

justify-content

align-items

Gap Spacing16px

Generated CSS Code

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 16px;