CSS Grid Generator

What CSS grid is for

Grid lays out an element's children on a two-dimensional lattice of rows and columns at the same time. You turn any element into a grid container with display: grid; its direct children become grid items that flow into the cells you define. This tool builds the two properties that shape that lattice — grid-template-columns and grid-template-rows — plus the gap between cells, and copies them as a clean block you paste into your stylesheet.

The three track units, and when to use each

Every track (a column or a row) has a size, and the size can be given in three ways this tool supports. fr shares out leftover space: after fixed tracks are placed, the free space is divided among the fr tracks in proportion, so 1fr 1fr 1fr is three equal columns and 2fr 1fr is a two-thirds / one-third split that re-flows as the container resizes. px pins a track to an exact width or height — right for a fixed sidebar or an icon rail. auto sizes the track to its own content, growing or shrinking to fit whatever the largest item in it needs. A classic app shell is grid-template-columns: 240px 1fr; — a fixed 240px sidebar and a flexible main column that takes the rest.

Worked example: a holy-grail page shell

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

A fixed 240px sidebar beside a flexible main column; a header and footer that each hug their content (auto) with a middle row that stretches to fill the viewport (1fr); and a uniform 16px gutter everywhere. Change the two column tracks to 1fr 1fr here and watch the preview split evenly — this is the exact CSS this tool emits.

Why equal tracks collapse to repeat()

When you set several neighbouring tracks to the same size, writing them out — 1fr 1fr 1fr 1fr — is repetitive and easy to miscount. CSS provides repeat(4, 1fr), which renders identically but states the intent plainly. This generator folds any run of two or more identical adjacent tracks into repeat() and leaves mismatched runs expanded, so 1fr 1fr 200px comes out as repeat(2, 1fr) 200px. It is purely a readability nicety; the layout is byte-for-byte the same either way.

Grid or flexbox?

Reach for grid when things must line up in both directions — a page skeleton, a dashboard, a photo gallery, a form with aligned label and field columns. Reach for flexbox when you have a single row or column that distributes items along one axis and wraps when space runs out, like a nav bar or a strip of tags. In real layouts they compose: grid for the overall regions, flexbox inside a region. Neither is the "modern replacement" for the other.

What this tool does not do (and where it fits)

This is a v1 that builds the grid's skeleton — track counts, per-track sizes and the gap. It deliberately leaves out two things that live one level down. Named areas (grid-template-areas with an ASCII-art map of regions) are a different way to describe the same lattice and are out of scope here. Item placement — grid-column: 1 / 3 to span an item across columns, grid-row: span 2 to stretch it down, or place-items to align content inside cells — describes where each child sits within the template you build here, so add those to the individual items after pasting this container block. For styling the boxes that land in the cells, the Box-Shadow Generator, Gradient Generator and Border-Radius Generator build the values that go inside them. The output also always lists grid-template-columns, grid-template-rows and gap so the copied rule is complete and unambiguous rather than relying on defaults.