CSS Grid Generator

Visually design CSS Grid layouts with an interactive editor. Set columns, rows, gaps, and alignment with live preview!

Quick Presets

Columns

Rows

Column Gap: 16px

Row Gap: 16px

Column Sizes

Row Sizes

Justify Items (Horizontal)

Align Items (Vertical)

Live Preview

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px 16px;
  justify-items: stretch;
  align-items: stretch;
}

Features

Visual grid builder
Custom column/row sizes
Gap controls
Alignment options
Layout presets

How to Use

1
Set number of columns and rows
2
Customize sizes
3
Adjust gaps and alignment
4
Copy generated CSS

Frequently Asked Questions

What does fr unit mean?

fr stands for "fraction". 1fr means 1 part of available space. 2fr takes twice as much as 1fr.

When should I use CSS Grid?

Grid is ideal for 2D layouts (rows AND columns). Use Flexbox for 1D layouts.

Back to Developer Tools