CSS Grid Generator

Columns

1–12

Rows

1–12

grid-template-columns

e.g. 1fr 1fr 1fr, 200px 1fr, repeat(3,1fr)

grid-template-rows

e.g. auto, 100px auto, repeat(3,80px)

Gap

Cell Span (select a cell)

col-span

row-span

Spanning cells are shown in green.

Click a cell to select it, then set column/row span below.

Generated CSS

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that lets you arrange content in rows and columns simultaneously. You enable it with display: grid on a container, then define column sizes with grid-template-columns and row sizes with grid-template-rows. The fr unit (fraction) distributes available space proportionally — for example, 1fr 2fr 1fr creates three columns where the middle is twice as wide. Child items can span multiple cells using grid-column: span 2 or grid-row: span 3, enabling complex asymmetric layouts. Unlike Flexbox (which is one-dimensional), CSS Grid is designed for two-dimensional page-level layouts like magazine grids, dashboards, and multi-column article layouts.

How to Use the CSS Grid Generator

Set the number of columns and rows using the number inputs (1–12 each).
Adjust grid-template-columns to control column widths (e.g. 1fr 2fr, 200px auto, repeat(3,1fr)).
Adjust grid-template-rows similarly, or leave as auto for content-sized rows.
Set the gap value to control spacing between cells (accepts any CSS length unit).
Click any cell in the preview to select it — selected cells are highlighted.
Set col-span and row-span, then click Apply. Spanning cells are shown in green.
Switch between CSS and HTML output tabs and click Copy to grab the generated code.