DEV3 Technologies home

Developer tool

CSS Grid Generator

Design a CSS Grid layout visually: set columns, rows, gaps and item spans, watch a live preview, then copy the CSS, HTML or Tailwind classes.

Free, no sign-up. Runs in your browser; nothing is uploaded.

Grid

Live preview

1
2
3
4
5
6

Item spans

1
2
3
4
5
6

Code

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

.grid-layout > :nth-child(1) {
  grid-column: span 2;
}

How to use the css grid generator

Build a grid visually

  1. Set the number of columns and rows. The preview redraws immediately.
  2. Choose the track size, such as 1fr, auto, a fixed width like 200px or minmax(120px, 1fr).
  3. Adjust the column gap and row gap, and the alignment of items inside their cells.
  4. Give any item a column span or row span to make a feature tile.
  5. Copy the CSS, the HTML or the Tailwind version.

How the generated CSS works

The container gets display: grid with grid-template-columns: repeat(n, size) and the same for rows. When both gaps are equal, the shorthand gap is used. Spans become rules such as grid-column: span 2.

Practical layouts

  • Card grid: three columns of 1fr, one row of auto, a 16 pixel gap.
  • Dashboard: a narrow 240px column for navigation plus a 1fr column for content.
  • Gallery: equal columns, with one image spanning two columns and two rows.
  • Holy grail: header, sidebar, content and footer using row sizes of auto 1fr auto.

Tips

  • Prefer gap over margins between items. It never adds space at the outer edges.
  • Use minmax(0, 1fr) instead of 1fr when long words or images make columns grow beyond their share.
  • Combine grid for the page layout and flexbox for the content inside each cell.
  • Remember that grid items stretch to fill their cell by default. Change align items if you want them to keep their natural height.

Frequently asked questions

What does 1fr mean?

fr is a fraction of the free space in the grid. Three columns of 1fr share the width equally, while 2fr 1fr gives the first column twice the space of the second.

When should I pick auto or minmax?

auto sizes a track to its content. minmax(120px, 1fr) keeps a column at least 120 pixels wide while letting it grow, which is a good building block for responsive layouts.

How do I make a responsive grid without media queries?

Use repeat(auto-fit, minmax(220px, 1fr)) for the columns. The browser fits as many columns as there is room for. You can paste that into the column size box here and adapt the generated CSS.

How does spanning work?

Set a column or row span on an item to make it cover several cells. The generator writes an nth-child rule for it. In your own code you will probably replace nth-child with a class.

Does it work in all browsers?

CSS Grid is supported in every current browser. The generated code needs no prefixes.