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.

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,...
• 4 min readCSS Grid minmax(): Flexible and Responsive Grid TracksCSS grid's minmax() function sets a minimum and maximum size for grid tracks. Combined with repeat() and auto-fill, it creates responsive grids without media queries. Here's...
• 6 min readCSS Grid Template: Build Grid Layouts with grid-template-columns and RowsCSS Grid's grid-template-columns and grid-template-rows define the structure of a grid layout. Here's how to use fr units, repeat(), minmax(), and named lines to build...
• 5 min readCSS Grid vs Flexbox: When to Use Each Layout SystemCSS Grid and Flexbox solve different layout problems. Grid is for two-dimensional layouts; Flexbox is for one-dimensional alignment. Here's when to use grid vs flexbox, with...
• 6 min readResponsive Grid Layout: Build Grids That Work on Any ScreenResponsive CSS grids adjust column counts based on available space using auto-fill, minmax(), and media queries. Here's how to build grid layouts that work from mobile to desktop.

Pillar