▦

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

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 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. Ideal for building responsive page layouts, dashboards, 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

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.

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.

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.

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.

Share this tool

Related Tools

⬛

CSS Flexbox Generator

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

SHD

CSS Box Shadow Generator

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

GRD

CSS Gradient Generator

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

Tailwind Component Preview

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

🎬

CSS Animation Generator

Free online CSS animation generator - generate CSS keyframe animations visually

📈

Cubic Bezier Generator

Free online cubic bezier generator - create custom CSS easing curves for transitions

▦