What is CSS Grid?
CSS Grid Layout is a two-dimensional layout system built into modern browsers. You define a grid container with display: grid, then control columns with grid-template-columns and rows with grid-template-rows. Fractional units (fr) distribute available space proportionally. Child items can span multiple columns or rows using grid-column: span N and grid-row: span N. Grid makes complex layouts straightforward — from simple equal-width columns to magazine-style asymmetric designs — without external libraries.
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 and grid-template-rows to control sizes (e.g. 1fr 2fr, 200px auto).
-
Set the gap between cells (e.g. 10px, 1rem).
-
Click any cell in the preview to select it (turns orange).
-
Set col-span and row-span in the Cell Span panel, then click Apply. Spanning cells turn green.
-
Click the CSS or HTML tab to switch the output format, then Copy to clipboard.
-
Click Reset All to start over with a fresh 3×3 grid.