CSS Grid Generator

The CSS Grid Generator is a visual builder for CSS Grid Layout. You choose how many columns and rows you want, pick a track size for each axis, set the gaps and the alignment, and a preview grid rearranges in real time. The exact CSS that produces what you see sits in a copy-ready box underneath, so you never have to write grid-template-columns by hand or count fraction units in your head.

A quick example shows what this grid generator CSS output looks like. Leave the column size at 1fr, drag Columns to 4 and Rows to 1, and set Column gap to 24px and Row gap to 16px. The preview shows four equal cells in one row, and the Generated CSS box reads display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap: 16px 24px;. The gap values come out row first, then column, which is the order the shorthand expects. That is the whole job of a CSS grid layout generator: settings in, a container rule out.

CSS Grid is a two-dimensional layout model. Unlike flexbox, which lays items along a single axis, grid controls rows and columns at the same time. The container holds the structure through a small set of properties: grid-template-columns and grid-template-rows define the tracks, gap adds spacing between them, and justify-items, align-items, justify-content and align-content position the items and the tracks. This tool exposes those properties in one panel and shows the result immediately.

The generator uses the repeat() function for any axis with more than one track, so grid-template-columns: repeat(3, 1fr) is what you get for a three-column grid of equal columns rather than a repetitive list. The fr unit represents a fraction of the free space in the container, which is what makes grid layouts fluid: three 1fr columns each take a third of the width and reflow as the container resizes. You can also mix in auto, min-content, max-content and fixed pixel tracks from the track-size menu.

Everything runs entirely in your browser. There is no signup, nothing is uploaded, and the tool keeps working offline once the page has loaded. It is useful both as a learning aid, because you can watch how each property changes the layout, and as a fast way to produce production-ready grid CSS for a gallery, a dashboard, a card layout, or a full page shell. The generated rule targets a .grid-container class and lists only the properties that have a visible effect, so the output stays clean.