CSS Grid Generator

Visually build CSS Grid layouts — set columns, rows, gaps, and named areas

Presets
Columns (3)
1 1fr
2 1fr
3 1fr
Rows (2)
1 1fr
2 1fr
Gap
Named Grid Areas (optional)
then click or drag cells to paint
1,1
1,2
1,3
2,1
2,2
2,3
CSS Output 
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

About CSS Grid Generator

CSS Grid is a two-dimensional layout system that lets you define rows and columns independently and place elements precisely anywhere in the resulting grid. This free CSS Grid Generator gives you a visual interface to build any grid layout without writing CSS from scratch — just configure your tracks and copy the output.

  • Set 1–12 columns and 1–12 rows, each with their own size and unit (fr, px, %, auto)
  • Control column gap and row gap independently with live sliders
  • Paint named grid-template-areas directly onto the visual grid
  • One-click copy of the complete CSS output including all grid properties
  • Built-in presets: Holy Grail, 3-Column, Sidebar, and 2×2 layouts
  • No sign-up, no server — all processing happens in your browser

How to Use the CSS Grid Generator

  1. 1

    Choose a preset or start from scratch

    Click a layout preset (Holy Grail, Sidebar, etc.) to load a ready-made configuration, or use the default 3×2 grid and customise it.

  2. 2

    Configure columns and rows

    Use the + / − buttons to add or remove tracks. For each track, set a size value and choose a unit: fr (flexible fraction), px, %, or auto.

  3. 3

    Set column and row gaps

    Drag the gap sliders to set spacing between columns and rows (0–64px). The grid preview updates instantly.

  4. 4

    Paint named grid areas (optional)

    Type an area name (e.g. "header"), then click or drag cells in the visual grid to assign that name. Cells with the same name get the same highlight colour and generate a grid-template-areas rule.

  5. 5

    Copy the CSS

    Click "Copy CSS" to copy the complete .container ruleset to your clipboard. Paste it straight into your stylesheet.

Tip: grid-template-areas only generates when every cell has a name assigned. Partially named grids output only the column/row/gap properties.

Common Use Cases

Page Layouts

  • • Build Holy Grail layouts with header, footer, sidebar, main
  • • Create multi-column magazine-style pages
  • • Design fixed sidebar + flexible content areas

Dashboard UIs

  • • Place stat cards, charts, and tables in named zones
  • • Create asymmetric 2×2 or 3×3 widget grids
  • • Mix fixed-pixel and flexible-fraction tracks

Card & Gallery Grids

  • • Equal-width card grids using 1fr columns
  • • Photo galleries with controlled gap spacing
  • • Product listings with responsive column counts

Learning & Prototyping

  • • Understand how fr units distribute space visually
  • • Experiment with grid-template-areas syntax
  • • Rapid prototype layouts before writing production CSS

Form Layouts

  • • Align labels and inputs in a clean 2-column grid
  • • Span wide inputs across multiple columns with named areas
  • • Control vertical spacing with row-gap

CSS Education

  • • Teach students grid concepts interactively
  • • Demo the difference between gap, column-gap, row-gap
  • • Show how adding auto tracks affects layout

Frequently Asked Questions

What is the fr unit?

The fr (fractional unit) represents a fraction of the available space in the grid container. For example, 1fr 2fr 1fr gives the middle column twice the width of the outer columns. It's the most flexible unit for responsive grids.

How does grid-template-areas work?

grid-template-areas lets you assign names to grid cells and then reference those names in child elements with grid-area: header. Cells with the same name form a contiguous rectangular area. This tool generates the areas string automatically when all cells are named.

Is CSS Grid supported in all browsers?

Yes — CSS Grid has full support in all modern browsers (Chrome, Firefox, Safari, Edge) since 2017. Global browser support is above 97%. You do not need any vendor prefixes for display: grid in 2024+.

What's the difference between CSS Grid and Flexbox?

Flexbox is one-dimensional — it lays out items in a single row or column. CSS Grid is two-dimensional — it controls both rows and columns simultaneously. Use Grid for full page layouts and complex two-axis positioning; use Flexbox for components and linear arrangements.

When does grid-template-areas appear in the output?

The grid-template-areas rule only generates when every cell in the grid has a name painted. If any cell is unnamed, only the column, row, and gap rules are output. Partially named grids are not valid CSS and are intentionally excluded.

Can I mix units — e.g., px and fr?

Yes — mixing units is a common pattern. For example, 260px 1fr gives a fixed-width sidebar and a flexible main area. The fr unit distributes the remaining space after fixed-size tracks are calculated.

Is my data safe? Does this tool send data to a server?

No data leaves your browser. All CSS generation happens entirely client-side using JavaScript and Svelte reactivity. Nothing is uploaded or stored anywhere.