R
Rajesh Patra
Back to Tools

CSS Grid Generator

Build CSS grid layouts visually with custom columns, rows, gaps, and alignment — then copy the ready-to-use CSS.

Columns 3

Col 1
Col 2
Col 3
Quick fill:

Rows 2

Row 1
Row 2
Quick fill:

Gap & Alignment

Column Gap16px
Row Gap16px
Justify Items
Align Items

Layout Presets

Live Preview

3 × 2
1
2
3
4
5
6

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 200px;
  gap: 16px;
}

Tailwind Classes

grid grid-cols-3 gap-4

Unit Reference

1fr1 fraction of available space
2fr2× the fraction unit
autoSized to content
min-contentSmallest possible size
max-contentLargest possible size
200pxFixed pixel size
50%Percentage of container
minmax(100px, 1fr)Min 100px, max 1fr