CSS Grid / Flex Layout Generator

Developer tools

Loading tool

Preparing the tool. The remaining time is not yet known.

All processing for this tool happens in your browser. Your input is not sent to a server.

About this tool

Visually set Grid columns or Flex direction, wrapping, gaps and alignment, then preview the layout and copy compact HTML/CSS.

Common uses

Generate a Grid layout for blog cards and content lists.
Try Flex direction, wrapping and alignment settings.

How to use it

1.Choose Grid or Flex and set columns, gap and item count.
2.Adjust wrapping, direction and alignment while previewing the layout.
3.Copy the generated HTML and CSS into your page.

Limits and notes

Up to 8 Grid columns, 30 preview items and a 0–64 px gap.
Sizes use a restricted px, rem, %, fr or auto/min-content/max-content grammar. Flex basis does not accept fr.
Arbitrary CSS functions, variables, media queries, drag reordering and responsive breakpoints are unsupported.

Frequently asked questions

Can I use minmax() or CSS variables?

The tool accepts a small explicit size grammar so arbitrary styles cannot affect the page. Add advanced rules in your own project after copying the code.

What does the generated code contain?

It includes a .layout container, numbered items and your chosen layout declarations, plus minimal base item styles for further editing.