CSS Grid and Flexbox Generator

Yes. There is no sign-up, no account, no watermark and no usage limit. The tool is a single page that runs in your browser.

No. You can drag sliders and see the layout change without knowing the properties. If you do know CSS, the property names are shown as labels so you can map each control to its real CSS equivalent.

Grid is two-dimensional: you define columns and rows and place items into them. Flexbox is one-dimensional: items flow along a single axis (row or column) and can wrap onto new lines. Grid suits page layouts and dashboards. Flexbox suits navigation bars, toolbars and single-axis alignment.

Use Grid when you care about both rows and columns at once, such as a card gallery or dashboard. Use Flexbox when items sit in one line and you mainly want to align or distribute them, such as a nav bar or button group. Many real pages use both. Switch modes in the tool with the same six items to see the difference.

Set the container to display: flex, then use justify-content: center for the main axis and align-items: center for the cross axis. In this tool, pick Flexbox, set both to center, and watch the preview.

This generator outputs a fixed number of columns. For a responsive grid, copy the CSS and change grid-template-columns to something like repeat(auto-fit, minmax(220px, 1fr)) so columns adjust to the available width. Adjust the 220px value to suit your card size.

No. This version focuses on column and row counts using repeat() and minmax(). If you need named areas, copy the CSS and add grid-template-areas by hand.

The generated CSS uses repeat(N, minmax(0, 1fr)), which shares available space evenly. For custom track sizes, copy the CSS and edit the grid-template-columns value in your code.

It lets each column shrink below its content width when the container is narrow. With a plain 1fr, a column holding wide content (a long word, an image or a code block) can refuse to shrink and cause horizontal overflow. Using 0 as the minimum avoids that in many cases.

It only spreads items when there is free space on the main axis. If the items already fill the container, or there is only one item, there is nothing to space out, so you will see no change.

Dense packing lets later items backfill gaps left by earlier, larger items. It is useful for magazine-style layouts, but it can make the visual order differ from DOM order, which affects keyboard tab order and screen readers. Check the result before using it.

The preview uses six sample children so the layout is easy to read. The CSS output applies to the container, so it works with any number of items in your own markup.

Yes. When rows is 1, no explicit grid-template-rows is emitted and rows flow implicitly. When rows is greater than 1, the tool emits repeat(N, minmax(0, 1fr)) for rows.

No. Grid and Flexbox are unprefixed in all current major browsers. If you must support very old browsers such as IE 10 or 11, you would need to add prefixes and fallbacks yourself.

No. Refreshing the page resets the controls to their defaults. To keep a layout, copy the CSS into your project or a scratch file.

Yes. The controls stack vertically on narrow screens and the preview stays usable. Building layouts on a phone is fiddly, so a desktop or tablet gives a better experience.

The output is a handful of standard CSS properties, and you are free to use it in personal, client or commercial projects.

No. The generator covers the classic Grid and Flexbox container properties. Container queries, subgrid, grid-template-areas and masonry are not included.