Skip to content
ToolQivo

CSS Grid Generator

Draw a grid layout and get the CSS, including named template areas.

Developer Tools Reviews Free · no sign-up

Preview

Quick Tool Overview

The CSS Grid Generator builds a layout by clicking cells and generates both placement styles — named template areas and line-based grid-column and grid-row — because each suits a different kind of layout.

What it does
Builds a CSS grid layout visually
You give it
Track sizes and item placements
You get back
Grid CSS in either placement style
Best for
Page layouts and two-dimensional component grids
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the CSS Grid Generator

Set the number of columns and rows, give them sizes, and place items by clicking cells. The CSS updates as you go, and the preview is the actual grid rather than a picture of one.

Both placement styles are generated, because they suit different situations. Named template areas are readable at a glance and easy to rearrange in a media query, which makes them ideal for page-level layout. Line-based placement with grid-column and grid-row is more precise and does not need every cell named, which suits components. The track sizes accept fr units, minmax(), auto-fit and auto-fill, with each explained where it appears.

Key features of the CSS Grid Generator

Draw to place

Click and drag across cells to define an area, rather than counting grid lines by hand.

Both placement styles

Named template areas for page layout, line-based placement for components — generated side by side.

Modern track functions

fr, minmax(), auto-fit and auto-fill, each explained where it appears.

A real preview

The preview is an actual CSS grid, so what you see is what the browser will do.

The overflow fix noted

minmax(0, 1fr) rather than 1fr, which is the standard cure for a grid item that refuses to shrink.

How to use the CSS Grid Generator

  1. 1

    Set the tracks

    How many columns and rows, and how each one is sized.

  2. 2

    Place your items

    Click and drag across cells to make an area.

  3. 3

    Name the areas

    Give each item a name to generate grid-template-areas.

  4. 4

    Copy the CSS

    Named areas or line-based placement, whichever suits.

Frequently asked questions

It distributes the space left after fixed tracks and gaps are subtracted. 1fr 2fr gives the second track twice the leftover space — not twice the total width, which is why it behaves differently from percentages.

Reviews of the CSS Grid Generator

What people who use the CSS Grid Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the CSS Grid Generator. It takes half a minute and no account.

Write the first review

More developer tools