Grid Generator

Visual CSS Grid layout generator

Presets

Columns

3 columns

Rows

2 rows

Gap

Live Preview

1
2
3
4
5
6

Generated CSS

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

.grid-item-1 {
}

.grid-item-2 {
}

.grid-item-3 {
}

.grid-item-4 {
}

.grid-item-5 {
}

.grid-item-6 {
}

About Grid Generator

CSS Grid generator visually creates Grid layout CSS code, drag to adjust rows/columns/gaps/areas. Essential for complex 2D layouts, page frameworks, responsive grid systems.

How to Use

  1. Set grid row/column count
  2. Adjust row/column sizes and gaps
  3. Drag to assign grid areas
  4. Copy generated HTML+CSS code

Frequently Asked Questions

Grid vs Flexbox which to choose?
Grid for 2D layouts (control rows and columns simultaneously): overall page framework, complex tables, chessboard layouts. Flexbox for 1D layouts (single row or column). Both can be combined.
What is fr unit?
fr (fraction) represents shares of remaining space. '1fr 2fr' = first column gets 1 share, second gets 2. More flexible than percentages, auto-handles gaps.
Grid browser compatibility?
Modern browsers fully supported (Chrome 57+/Firefox 52+/Safari 10.1+). IE10-11 partial support with old syntax (-ms-grid). Unsupported browsers need fallback layout.

Related Tools

C

CSS Minify/Beautify

G

Gradient Generator

S

Shadow Generator

F

Flexbox Generator

View All CSS Tools