CSS Grid Generator
Build grid layouts visually — configure columns, rows and gaps, draw items by clicking or dragging.
① Set columns & rows and define track sizes ② Click cells to add items and drag to span ③ Copy the CSS
Columns
Rows
Column Gap (px)
16
Row Gap (px)
16
Col
C1
C2
C3
Row
R1
R2
R3
Preview
Generated CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}How to use CSS Grid
CSS Grid is a two-dimensional layout system that lets you control columns and rows simultaneously. Use fr units to distribute space proportionally, px for fixed sizes, % for relative sizes, and auto to fit content. The gap property adds consistent spacing without extra margins. Define grid items with grid-column and grid-row shorthand using start / end line numbers. This generator outputs clean, production-ready CSS you can paste directly into your stylesheet.
Frequently Asked Questions
CSS Grid Layout is a two-dimensional layout system built into browsers. Unlike Flexbox (which works on one axis), Grid lets you define explicit rows and columns and place items precisely anywhere in the grid, enabling complex layouts with minimal code.
fr stands for "fractional unit". It represents a fraction of the available space in the grid container after fixed and auto tracks are resolved. For example, grid-template-columns: 1fr 2fr 1fr creates three columns where the middle one is twice as wide as the others.
Use auto when you want a column or row to size itself to fit its content. Use fr to fill remaining space proportionally. Combining them — e.g. auto 1fr — creates a sidebar that fits its content while the main area takes all remaining width.
gap is shorthand for both column-gap and row-gap. You can write gap: 16px to set both, or gap: 16px 24px to set row-gap first and column-gap second. These replace the older grid-gap which is now deprecated.
grid-column: 1 / 3 places an item from grid line 1 to line 3, spanning 2 columns. Alternatively, grid-column: span 2 spans 2 columns from wherever the item is placed. This generator uses the start / end syntax for explicit control.
Yes. CSS Grid has been supported in all major browsers since 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). You can use it safely in production without fallbacks for any modern browser target.
This generator supports up to 12 columns and 8 rows, covering the vast majority of real-world layouts. CSS itself has no hard limit — you can define as many tracks as needed in production code.