CSS Grid Generator

A CSS grid generator for fixed and responsive layouts

CSS Grid places items in rows and columns at the same time, which makes it the natural tool for card galleries, dashboards and page layouts. This CSS grid generator builds the container rule for you: pick a fixed number of columns or a responsive pattern, set gaps and alignment, and watch numbered items fill a live grid before you copy the CSS and HTML.

Example output

The defaults create three equal columns with a 16px gap:

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

Switching to Responsive auto-fit with a 220px minimum width and different gaps gives a layout that needs no media queries:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 24px;
}

When the gaps differ, the shorthand lists the row gap first and the column gap second. The HTML tab contains the container with one <div> per item.

Options explained

Fixed columns

Column count (1 to 12) and Column size become repeat(count, size). The size field accepts any track size: 1fr for equal shares, 200px for fixed widths, or minmax(0, 1fr). The fr unit divides the free space after fixed tracks and gaps are subtracted.

auto-fit vs auto-fill

Both create as many columns as fit, each at least the minimum width. The difference shows when there are fewer items than columns:

• auto-fit collapses the empty tracks, so the existing items stretch to fill the row.
• auto-fill keeps the empty tracks, so items stay at column width and leave space at the end.

Set Number of items to 2 on a wide screen to see it in the preview. Use auto-fit when a few cards should fill the width, and auto-fill when cards should keep a consistent size.

Rows

With Row count at 0 the grid creates rows automatically as items need them, sized by content. A positive count adds grid-template-rows: repeat(n, size); items beyond those rows still go into implicit rows, which you can size with grid-auto-rows.

Alignment

justify-items positions each item horizontally inside its cell and align-items vertically. Both default to stretch (omitted from the output), which makes items fill their cells. Values such as center shrink items to their content.

Tips and common mistakes

• 1fr columns can grow. 1fr has a minimum of auto, so a long word, table or image can widen its column and make the grid uneven. Use minmax(0, 1fr) in the Column size field to keep columns equal.
• Overflow on small phones. minmax(220px, 1fr) forces at least 220px, which can overflow a very narrow screen. A safer pattern is minmax(min(220px, 100%), 1fr).
• Spanning items. To make a featured card wider, add grid-column: span 2 to that item. The generator produces the container rule; placement rules go on the items.
• Grid does not reorder content for assistive technology. Visual placement never changes the DOM order, so keep the HTML in reading order.

Grid vs flexbox

Use grid when items should line up in both directions, such as a gallery where every row has the same column edges. Use the CSS flexbox generator for one-dimensional rows or columns where content size should decide the spacing, like toolbars and navigation. The two combine well: a grid for the page, flexbox inside each card. For headings that scale smoothly across these layouts, the CSS clamp generator calculates fluid sizes, and the CSS minifier compresses the finished stylesheet.

Privacy

The grid preview and generated code are created in your browser. Nothing is uploaded.