Available · Free

CSS Generator

Explore Flexbox and Grid controls visually, then copy the CSS that corresponds to your selected layout.

LayoutDirectionWrappingJustify contentAlign itemsGap: 12pxPreview width: 640px

Try a row with wrapping for cards, or a three-column grid for a gallery. Preview width changes only the demo canvas; it is not included in the generated CSS.

Item 1

Item 2

Item 3

Item 4

Generated CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: stretch;
}

How to use it

Select Flexbox or Grid and adjust alignment, gap, and layout controls.
Resize the demo preview to inspect the layout.
Copy the generated CSS for your own project.

Example & limitations

For example, choose Grid with three columns and a 16px gap for a simple gallery layout.

The preview uses four sample blocks and does not execute arbitrary HTML. Preview width is a demo setting and is not included in the generated CSS.