Open menu

CSS Grid Generator

Design page layouts with CSS grid by painting named areas onto a grid of cells, then fine-tune the column and row sizes with fr, px, %, minmax() and repeat(). Switch to auto-fill mode for card grids that wrap on their own without media queries. The generator checks that every area is a valid rectangle, warns when fixed columns are too wide for phones, and exports clean CSS with one rule per area, plus HTML, Tailwind and React.

Preset gallery
header
sidebar
main
footer

Accessibility checks

  • Pass Every named area is a rectangle, so grid-template-areas is valid.
  • Pass Fixed column widths add up to 252px, which fits on phones.
  • Pass Grid placement changes visual order only. Keep the HTML in a logical reading order for keyboard and screen-reader users.

Export code

.layout {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 16px;
}

.layout__header {
  grid-area: header;
}

.layout__sidebar {
  grid-area: sidebar;
}

.layout__main {
  grid-area: main;
}

.layout__footer {
  grid-area: footer;
}
Favourites on this device (0)

No favourites yet.

Grid tracks & gaps
Layout type
Column sizes

Use px, fr, %, rem, auto, min-content, max-content, minmax(a, b) or repeat(n, size).

Row sizes

Use px, fr, %, rem, auto, min-content, max-content, minmax(a, b) or repeat(n, size).

Named areas
Area to paint

Pick an area, then click cells (or Tab to them and press Enter) to paint. Each area must form a rectangle.

How to use the CSS grid generator

  1. Start from a preset: holy grail, sidebar layouts, app shell, dashboards, magazine, bento or auto-fill card grids.
  2. Set the tracks. Type a size for each column and row. Invalid sizes are highlighted and ignored, so the output stays valid. Add or remove columns and rows as needed.
  3. Paint the areas. Pick an area name (or create one), then click cells, or Tab to them and press Enter, to assign them. Use Empty for gaps.
  4. Adjust the gaps between columns and rows.
  5. For card grids, switch to Auto-fill cards and set the minimum card width.
  6. Export CSS, HTML, SCSS, Tailwind or React.

How it works

.layout {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  gap: 16px;
}
.layout__header { grid-area: header; }

The fr unit shares the free space. auto rows fit their content. minmax(0, 1fr) stops long words or wide images from stretching a column.

Worked examples

Example 1: a blog with a reading column

Load Blog post. The middle column is minmax(0, 680px) with flexible columns either side, which centres the article at a comfortable line length while the header and footer span the full width.

Example 2: a dashboard

Load Dashboard: a header, four KPI tiles and a large chart beside a table. Repaint the cells to give the table more room, and check that every area stays a rectangle.

Example 3: a product listing

Load Cards auto-fill with a 220px minimum. Cards wrap from four columns to one as the screen narrows, with no media queries at all.

Making grids responsive

For named-area layouts, redefine grid-template-columns and grid-template-areas inside a media query. On phones, a single column with areas stacked in reading order is usually best.

Common mistakes

  • Fixed pixel columns on mobile: combine them with a media query, or use minmax().
  • Forgetting min-width: 0: grid items default to min-width: auto, so long content can overflow. minmax(0, 1fr) tracks avoid this.
  • Reordering content visually: keep the HTML order meaningful.

Frequently asked questions

What are named grid areas?

grid-template-areas lets you draw a layout with words. Each string is a row, and each word is a cell: "header header" "sidebar main". Children are then placed with grid-area: header. It makes layouts readable and easy to rearrange in media queries.

Why must areas be rectangles?

The CSS Grid specification only allows rectangular areas. An L-shaped or split area makes the whole grid-template-areas declaration invalid, and the browser ignores it. The checker flags any area that isn't a single filled rectangle.

What's the difference between auto-fill and auto-fit?

Both create as many columns as fit. With auto-fill, empty tracks keep their space, so a few cards stay at their minimum width. With auto-fit, empty tracks collapse, so a few cards stretch to fill the row.

Does grid change the reading order?

Only visually. Screen readers and keyboard focus still follow the HTML order, so keep the markup in a logical order (header, navigation, main content, footer) and use grid only to arrange it on screen.

Why minmax(min(220px, 100%), 1fr)?

minmax(220px, 1fr) would overflow on screens narrower than 220px. Wrapping the minimum in min(220px, 100%) lets a single column shrink to the screen width on very small devices.

Sources