RubanTools
Suggest a Tool

CSS Grid Generator

Build CSS Grid layouts visually - set rows, columns, gap, click cells to highlight areas, and copy the CSS.

Grid Settings
3
3
16px
16px
Live Preview (click cells to select area)

CSS Grid FAQ

Grid is two-dimensional - it controls rows AND columns simultaneously, making it ideal for page layouts. Flexbox is one-dimensional - it controls either a row or a column at a time, making it ideal for components within a layout (navbars, cards). Use Grid for overall page structure, Flexbox for alignment within components.

fr (fraction unit) distributes available space. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle gets twice as much space as each side column. repeat(3, 1fr) is shorthand for three equal-width columns.

grid-column: 1 / span 2 means "start at column line 1 and span 2 columns". grid-column: 2 / 4 means "from line 2 to line 4" (covers 2 columns). Grid lines are numbered from 1; negative numbers count from the end (−1 is the last line).