Design

▦

CSS Grid Generator

Visual CSS grid layout builder with live preview and code export

Preset Layouts

Columns (3)

Col 1

Col 2

Col 3

Rows (3)

Row 1

Row 2

Row 3

Gap

Separate

Gap

Live Preview

3 cols x 3 rows - click cells to edit

1,1

1,2

1,3

2,1

2,2

2,3

3,1

3,2

3,3

Named areas

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
}

Size Reference

1fr - one fraction of available space

auto - size to content

200px - fixed pixel width

50% - percentage of container

minmax(100px, 1fr) - flexible with minimum constraint

Share to Community

Was this tool helpful?

What is CSS Grid Generator?

Free online CSS grid generator to design CSS grid layouts visually with our free online grid generator.

Define rows, columns, gaps, and template areas using simple controls while watching the grid update live. Place items by clicking cells, adjust spanning, and export clean CSS code. Build a responsive grid with grid-template-columns and the fr unit, create a holy grail layout with named grid-template-areas, or set up an auto-fit repeat for a responsive card gallery. Ideal for page layouts, dashboards, photo galleries, and complex multi-column designs. No dependencies, no signup - just open and start building.

How to Use CSS Grid Generator

1Set the number of columns and rows using the controls
2Adjust column and row sizes (px, fr, auto, or minmax)
3Set the gap between grid cells
4Preview the layout live and copy the generated CSS code

Frequently Asked Questions

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay out content in rows and columns simultaneously, making it ideal for full-page layouts, card grids, dashboards, and any design that needs precise two-dimensional control.

How do I define rows and columns?

Use the controls to set the number of columns and rows and their sizes (e.g., 1fr, 200px, auto, minmax). The generator handles grid-template-columns and grid-template-rows for you and shows the result in real time.

What does 'fr' mean in CSS Grid?

The 'fr' unit stands for fraction. It represents a share of the available space. For example, '1fr 2fr' creates two columns where the second is twice as wide as the first. It's the most flexible way to define grid track sizes.

Is CSS Grid supported in all browsers?

Yes. CSS Grid has over 97% global browser support, including all modern browsers (Chrome, Firefox, Safari, Edge). The generated code works everywhere without vendor prefixes.

How do I make a responsive grid that wraps automatically?

Use grid-template-columns with repeat(auto-fit, minmax(200px, 1fr)). This fits as many columns as the container allows, each at least 200px wide, and reflows them as the viewport changes without media queries. Set the minimum width in the generator and copy the result.

When should I use grid-template-areas?

Named template areas are ideal for full-page layouts like a header, sidebar, content, and footer. You name each region and draw the layout as a text grid, which makes the structure readable and easy to rearrange at breakpoints. The generator outputs the area names and placement for you.

Share this tool

Related Tools

⬛

Flexbox builder

Flexbox generator - visual CSS flexbox layout builder with live preview and ready-to-copy CSS code

SHD

Box shadow generator

Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview

◻️

Css border radius

Free online border radius generator - generate CSS border-radius values with visual editor

Tailwind css preview

Free online tailwind component preview - write Tailwind CSS HTML and preview components live in the browser

Html email signature

Free online email signature generator - create professional HTML email signatures with live preview

GRD

Css gradient

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

✂️

Css clip path

Free online CSS clip path generator - create custom CSS clip-path shapes visually

✏️

SVG Path Editor

Free online SVG path editor - edit SVG paths and Bezier curves visually

Keep reading: CSS Cheat Sheet and http status codes reference. Doing this in code instead? See the utility endpoints.