WebToolsPlanet
css Tools

CSS Grid Generator

Build CSS Grid layouts visually — configure columns, rows, gaps, and named areas and copy production-ready CSS.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is CSS Grid Generator?

CSS Grid Layout is a two-dimensional layout system that fundamentally changed how developers build web interfaces. Unlike older float-based or even Flexbox-based layouts, Grid lets you define both rows AND columns simultaneously, allowing you to place any element precisely anywhere within a defined layout area. Mastered by fewer developers than Flexbox despite being equally supported, Grid is the ideal solution for complex page structures: magazine-style layouts, dashboard panels, photo galleries, and nested component grids.

This visual generator removes the friction of learning Grid's syntax. Instead of memorizing properties like grid-template-columns: repeat(3, 1fr) or grid-template-areas, you configure your layout using intuitive controls and instantly see the corresponding CSS. It teaches Grid through experimentation, and the generated code — using modern best-practices like fr units and minmax() — is production-ready to copy directly into your stylesheet.

How to Use CSS Grid Generator

1

Set the number of columns using the slider or input (e.g., 3 columns)

2

Set the number of rows (or leave as "auto" to let content determine height)

3

Adjust column and row sizing: use fr (fractional units), px, %, or auto

4

Configure the gap between grid cells using the column-gap and row-gap controls

5

Click on grid cells in the preview to assign them to a named grid area (optional)

6

Copy the generated CSS for both the container (.grid) and optional child classes

Common Use Cases

  • Rapidly prototyping a page layout with header, sidebar, main content, and footer zones
  • Building a responsive 3-column card grid that collapses to 1 column on mobile using auto-fill
  • Creating a magazine-style editorial layout with large featured articles spanning multiple columns
  • Designing a dashboard UI with widget panels of different sizes aligned to a tight grid
  • Learning how fr units, minmax(), and grid-template-areas actually work visually
  • Generating the grid container CSS for a photo gallery that uses grid-auto-flow: dense
  • Creating Holy Grail layouts (full-height sidebar with header and footer) with 3 lines of CSS
  • Experimenting with subgrid to align nested elements to the parent grid baseline

Example Input and Output

A 3-column page layout with header and footer spanning all columns:

Visual Grid Configuration
Columns: 3
Rows: 3
Column sizes: 200px 1fr 200px
Row sizes: auto 1fr auto
Gap: 16px
Named areas:
  header header header
  sidebar main aside
  footer footer footer
Generated CSS Output
.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header  { grid-area: header;  }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main;    }
.aside   { grid-area: aside;   }
.footer  { grid-area: footer;  }

Client-Side Processing

The layout canvas runs entirely in your browser. No grid configurations or generated CSS is sent to our servers.

Responsive Grid Tip

To create a fully responsive grid that requires NO media queries, use: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many columns as fit, each at least 250px wide, growing to fill any extra space. It's one of the most powerful single lines in CSS.

Grid vs Float/Table

If you're coming from an old bootstrap-style float grid or table-based layouts, CSS Grid replaces all of those patterns with far less code. The Holy Grail layout (header + 3-column body + footer) that required dozens of float hack CSS lines can be accomplished with 5 CSS Grid lines.

Frequently Asked Questions

What is the difference between CSS Grid and Flexbox?
Grid is two-dimensional (rows AND columns). Flexbox is one-dimensional (rows OR columns). Use Grid when you need to control both axes simultaneously — page layouts, gallery grids, dashboards. Use Flexbox for component-level alignment: navigation bars, button groups, centering a single element. They work together well; use Grid for the outer page structure and Flexbox for inner component layout.
What does "fr" mean in CSS Grid?
"fr" stands for "fractional unit" — it represents a fraction of the available free space in the grid container. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle one gets twice as much space as each side column. fr units are always calculated after fixed-size columns (px, em) and minimum content sizes are subtracted from the total space.
What is the difference between gap, row-gap, and column-gap?
gap is shorthand for setting both row-gap and column-gap at once (gap: 16px sets both; gap: 8px 16px sets row-gap 8px and column-gap 16px). Gaps create Space between cells but NOT on the outer edges of the grid — add padding to the container if you need outer spacing.
How does grid-template-areas work?
grid-template-areas lets you name zones of your grid using quoted strings. Each string represents a row; each word represents a column cell. Repeating a name creates a spanning slot. Use "." for an empty cell. Child elements are then placed using grid-area: zonename. This makes complex layouts extremely readable.
What is auto-fill vs auto-fit?
Both are used with repeat() to create responsive grids without media queries: repeat(auto-fill, minmax(200px, 1fr)) creates as many 200px columns as will fit. auto-fill leaves empty tracks at the end of the row; auto-fit collapses empty tracks and stretches existing columns to fill the available width. For cards that should grow to fill space, use auto-fit.
Does CSS Grid work in all browsers?
Yes. CSS Grid has full support in all modern browsers (Chrome, Firefox, Safari, Edge) since 2017. Global desktop usage support is over 97%. Older IE11 requires a different grid syntax (display: -ms-grid) which is now rarely needed. For new projects, you can use CSS Grid without any prefix or polyfill.

How This Tool Works

The visual canvas renders a div-based representation of the grid with configurable dimensions. When any control (columns, rows, gap, sizing) is changed, the tool recalculates the grid-template-columns, grid-template-rows, and gap values and re-renders both the preview and the generated CSS code block. Named area assignments are stored as a 2D array mapping cell coordinates to area names, then serialized as quoted row strings for the grid-template-areas property.

Technical Stack

Browser-native CSS GridReact state-driven previewCustom CSS code serializerClient-side only

Related Tools

CSS Unit Converter
Convert between PX, REM, EM, VW, VH, and % CSS units — with configurable base font size and live conversion.
Box Shadow Generator
Create CSS box shadows with a visual editor.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Border Radius Generator
Create complex CSS border-radius shapes with independent corner controls — from rounded buttons to organic blobs.
Flexbox Generator
Build CSS Flexbox layouts visually — configure every container and item property and get ready-to-use CSS.
CSS Minifier
Compress and minify CSS code to reduce file size and speed up page loads.