CSS Grid Generator

How to use the CSS grid generator

Getting from a blank grid to production-ready CSS takes four steps:

1. Set the number of columns (grid-template-columns) — Enter a value like repeat(3, 1fr) for three equal columns, or 200px 1fr 200px for a sidebar-main-sidebar layout. Every valid CSS value works.
2. Set the number of rows (grid-template-rows) — Define fixed row heights (100px 200px), auto-sizing rows (auto), or leave it blank to let the grid create implicit rows as needed.
3. Adjust the gap between cells (gap / column-gap / row-gap) — Enter a single value for uniform gutters (1rem) or separate values for column and row gaps (1rem 2rem).
4. Copy the generated CSS and paste into your stylesheet — The output panel updates live. Click Copy to grab the full .container ruleset and drop it straight into your project.

CSS Grid cheat sheet

Quick reference for the properties you'll reach for most often:

Grid template values cheatsheet

• 1fr — one fractional unit. Shares space equally with other fr tracks.
• repeat(3, 1fr) — shorthand for 1fr 1fr 1fr.
• repeat(auto-fill, minmax(200px, 1fr)) — responsive masonry. As many 200px-min columns as fit, each flexing up to fill.
• 200px auto 1fr — fixed sidebar, auto-width sidebar 2, flexible main area.
• minmax(100px, 300px) — clamps a track size between a floor and ceiling.

CSS Grid vs Flexbox — when to use each

Both Grid and Flexbox are layout tools, but they solve different problems:

• Grid = two-dimensional — you control rows AND columns at the same time. Use it for page-level layouts, card grids, form label alignment, and anything that needs items to line up across both axes.
• Flexbox = one-dimensional — you work on a row OR a column at a time. Use it for navigation bars, button groups, toolbars, and any sequence of items along a single axis.
• Rule of thumb: use Grid for the page skeleton; use Flexbox Generator for the components inside it.
• Nesting works well: a grid cell can contain a flex container, and a flex item can contain a nested grid. There's no penalty for combining them.

For a deeper comparison, see CSS Grid vs Flexbox — choosing the right layout model.

Common grid layout patterns

Copy any of these directly into your stylesheet or paste them into the generator above to preview visually.

12-column grid (Bootstrap-like)

/* 12-column grid */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Holy grail layout

Header spanning full width, a left sidebar, main content area, right aside, and a full-width footer — all without floats or hacks. See also: building responsive grid layouts.

/* Holy grail: header, sidebar, main, aside, footer */
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
}

Responsive auto-fill card grid

No media queries needed. Columns wrap automatically when the viewport narrows. For a full walkthrough see CSS Grid areas guide.

/* Responsive card grid — no media queries */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

CSS Grid browser support

CSS Grid reached 98%+ global browser support in 2017 across Chrome, Firefox, Safari, and Edge. It is safe to use in production without any fallbacks.

Subgrid (grid-template-columns: subgrid) — which lets nested grids inherit the parent's track definitions — crossed the 90% support threshold in 2023 after Safari and Firefox shipped it. Chrome added support in version 117. You can use subgrid in new projects today, though a simple fallback (display: contents) covers the remaining gap.

Frequently asked questions

What is the fr unit in CSS Grid?

fr stands for fractional unit. It represents a share of the available space in the grid container after fixed-size and auto-size tracks have been allocated. Writing grid-template-columns: 1fr 1fr 1fr divides the container into three equal columns. Writing 200px 1fr 2fr reserves 200px for the first column, then splits the remainder into thirds — one third for the second column and two thirds for the third.

Can I use CSS Grid for responsive design without media queries?

Yes. The pattern repeat(auto-fill, minmax(250px, 1fr)) creates a grid that automatically adds or removes columns based on the available width. Each column is at least 250px wide and expands to fill extra space. No breakpoints, no @media rules — the browser handles it. This is one of the most practical advantages of CSS Grid over older layout techniques.

What's the difference between grid-gap and gap?

grid-gap was the original property name from the early CSS Grid specification. It was renamed to gap when the spec was updated to apply the same property to both Grid and Flexbox layouts. Both names work in all modern browsers, but gap is the current standard and the one you should use in new code. Linters and style guides (including Stylelint's recommended config) will flag grid-gap as deprecated.

Related tools

• Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
• Aspect Ratio Calculator — Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.
• Flexbox Generator — Visual CSS Flexbox playground. Live preview + copyable CSS. Control direction, wrap, justify, align, gap. Example child layouts.
• Box Shadow Generator — Visual CSS box-shadow builder. Control offset, blur, spread, color, inset. Multi-layer shadows. Live preview + copyable CSS.

Related articles

• 5 min readCSS Grid Template Areas — Named Grid Areas ExplainedCSS grid-template-areas lets you name regions of your layout and assign elements to them visually. Here's how to define named grid areas, assign elements, and build full page...
• 4 min readCSS Grid Auto Placement — How grid-auto-flow WorksCSS grid auto-placement automatically positions items in the grid without explicit placement rules. Here's how grid-auto-flow, grid-auto-rows, and grid-auto-columns work — and...
• 4 min readCSS Grid Browser Support — What Works Where in 2025CSS Grid has near-universal browser support as of 2025. Here's what's supported everywhere, what features need prefixes or workarounds, and how to progressively enhance layouts...
• 4 min readCSS Grid Gap — Spacing Between Grid ItemsCSS grid's gap property (formerly grid-gap) adds spacing between rows and columns without affecting outer edges. Here's how gap, row-gap, and column-gap work, plus techniques...
• 8 min readCSS Grid Layout — How to Build Two-Dimensional LayoutsCSS Grid creates two-dimensional layouts with explicit rows and columns. Here's how grid-template-columns, grid-area, auto-fit, and minmax work with practical patterns.
• 4 min readCSS Grid Lines — Placing Items with Line Numbers and NamesCSS grid lines are the dividers between tracks. You can place items using line numbers (1, 2, -1) or named lines. Here's how grid line placement works with grid-column,...

Pillar

Part of Frontend & Design.

Written by Mian Ali Khalid. Last updated 2026-05-12.