Skip to content
ToolBoxGeniehome

CSS Grid Generator

Developer Tools · Added

Grid is the layout system worth learning and the one hardest to hold in your head, because a track list is a small language of its own. Build the layout here instead: add and size tracks, set the gaps and alignment, drop a cell across two columns, and watch a real grid respond. What you copy is the CSS that produced exactly what you are looking at, with every default left out.

Column mode

Columns (3)

Rows (1)

px
px

Each item within its own cell, horizontally

Each item within its own cell, vertically

The whole grid inside the container, horizontally

The whole grid inside the container, vertically

6 cells

Cell 1 placement

0 = automatic

0 = automatic

Preview

1
2
3
4
5
6

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  gap: 12px;
}

HTML

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
</div>

3 explicit columns. Anything that does not fit spills into implicit rows, which take their height from their content unless grid-auto-rows says otherwise.

Only properties that differ from the CSS default are written out, so what you copy is the change rather than a dump of every grid property. display: grid and the column track list are always included, because they are what make the rest apply.

How to use the css grid generator

  1. 1Choose explicit tracks if you know how many columns you want, or the responsive mode if the column count should follow the container width.
  2. 2Size each track. Use fr for a share of the free space, px or rem for a fixed width, and auto to let the content decide.
  3. 3Set the row and column gaps, then the four alignment properties — the hints say which of them positions items inside their cells and which moves the whole grid.
  4. 4Click a numbered cell to select it, then give it a column or row span, or an explicit start line. Zero means automatic placement.
  5. 5Copy the CSS, and the matching HTML if you need a skeleton to paste it onto.

Examples

Three equal columns

Input
Explicit tracks: 1fr, 1fr, 1fr with a 12px gap
Result
grid-template-columns: repeat(3, 1fr); gap: 12px;

Identical tracks collapse into repeat() automatically at three or more, which is what you would have written by hand.

A responsive grid with no media query

Input
Responsive mode, minimum column 240px, auto-fit
Result
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

The column count follows the container's width on its own. Three across on a laptop, one on a phone, and not a breakpoint anywhere.

A feature cell spanning two columns

Input
Cell 1 with a column span of 2 in a three-column grid
Result
.grid > .cell:nth-child(1) { grid-column: span 2; }

Only the cells you actually change get a rule. The other five inherit the container's placement and need no CSS at all.

About the css grid generator

Tracks, lines and the fr unit

A grid is defined by its tracks — the columns and rows — and the lines between them. Declaring three columns creates four vertical lines, numbered from one, and placing an item is a matter of naming the lines it starts and ends at. This is the piece that makes Grid feel different from everything before it: position is expressed against the container's structure rather than against the item's neighbours.

The fr unit is the other new idea, and it is not a percentage. One fr is one share of whatever space remains after fixed sizes and gaps have been taken out, so 200px 1fr 1fr gives a fixed sidebar and two columns that split what is left. Percentages cannot do this, because they are computed against the container before gaps are subtracted, which is why percentage-based grids overflow by exactly the width of their gutters.

minmax() combines the two. minmax(240px, 1fr) means never narrower than 240px, otherwise take a share of the free space — and wrapping it in repeat(auto-fit, …) tells the browser to make as many such columns as fit. That single declaration is a responsive gallery with no media query, and it is the strongest argument for learning Grid rather than reaching for a framework.

Alignment: four properties, two questions

Grid has four alignment properties and they are routinely confused, which is understandable because their names are almost identical. The distinction is what they move. justify-items and align-items position each item inside its own cell — horizontally and vertically respectively. justify-content and align-content move the entire grid inside its container, which only does anything when the tracks are smaller than the space available.

That last condition is the source of most of the confusion. Set justify-content to center on a grid whose columns are all fr, and nothing happens: the fr tracks have already grown to fill the container, so the grid is exactly as wide as its box and there is nothing to centre. Nothing is broken; the property is doing precisely what it says to a grid that has no free space.

The preview on this page is deliberately built from the same options object that produces the CSS, so what you see and what you copy cannot drift apart. When a setting appears to do nothing here, it will also do nothing in your stylesheet — and the note under the preview will usually tell you which of these two situations you are in.

Frequently asked questions

What is the difference between auto-fit and auto-fill?
They only differ when the row has spare room and fewer items than it could hold columns. auto-fill keeps the empty tracks, so four cards in a row with space for six sit at their minimum width and leave a gap at the end. auto-fit collapses the empty tracks to zero, so those four cards stretch to fill the whole row. Most people want auto-fit and most people have never been told why, which is why both are offered here with the difference spelled out rather than one being chosen silently.
When should I use Grid rather than Flexbox?
Grid is two-dimensional and Flexbox is one-dimensional, and that is the whole decision. If you are laying out rows and columns together — a page skeleton, a card gallery, a form with aligned labels — Grid lets you place things in both directions at once. If you are distributing items along a single line, such as a navigation bar or a row of buttons, Flexbox is simpler and does not need a track list. They coexist happily: a grid cell is very often a flex container.
Why does my justify-content setting appear to do nothing?
Because it distributes leftover space in the grid, and an fr track has already absorbed all of it. fr means a share of what is left over, so with any fr column there is nothing left to distribute and the property has no effect. Give the tracks fixed sizes — px or rem — that add up to less than the container, and justify-content will start moving the whole grid within it.
Why is the generated CSS so short?
Because only properties that differ from the CSS default are written out. A generator that emits all eight grid properties every time produces code that looks thorough and buries the two or three lines that actually matter, and pasting it into a stylesheet leaves the next reader unable to tell which parts were deliberate. display: grid and the column track list are always included, since they are what make everything else apply.
Do the spans work at every screen width?
In the explicit-track mode, yes — the column count is fixed, so a span of two always means two of them. In the responsive mode the count depends on how wide the container is, and at narrow widths the grid can have fewer columns than the span asks for, in which case the cell simply takes the full row. That is usually the behaviour you want, but it is worth checking at mobile width before shipping, and the note under the preview says so when it applies.

Related tools