CSS Grid Generator
Generate grid-template from rows and columns.
▶About this tool
This tool generates grid-template CSS in one click. Three features: 1) Enter rows, columns, track sizes (fr, px, auto), gap via form, 2) Copy generated CSS directly, 3) Useful for 2D layouts, card lists, dashboard design.
Tool interface
Usage
- Enter rows, columns, track sizes (fr, px, auto), gap
- Generated grid-template CSS is displayed
- Copy and paste into your project
When to use
Grid layouts, card lists, dashboard layout design.
Examples
3 cols × 2 rows, 1fr each, gap 1rem → grid-template-columns: repeat(3, 1fr);
FAQ
What is fr in CSS Grid?
Fraction. Share of available space. 1fr 1fr 1fr = thirds, 2fr 1fr = 2:1 ratio.
Grid vs Flexbox?
Grid = 2D (rows and cols). Flexbox = 1D (row or col). Use Grid for complex layouts.
How to write grid-template-columns?
repeat(3, 1fr) for thirds, 200px 1fr 1fr for fixed+flex, minmax(200px, 1fr). This tool generates it.
What is gap in CSS Grid?
Space between rows and columns. gap: 1rem for both. row-gap and column-gap for separate.
How to use grid-template-areas?
Define named areas. Assign with grid-area. This tool focuses on template generation.
How to use repeat()?
repeat(3, 1fr) repeats 1fr three times. repeat(auto-fill, minmax(200px, 1fr)) for responsive.
When to use Grid vs Flexbox?
Card grids, 2D layouts → Grid. Nav bars, single row → Flexbox. Often combined.
What is minmax()?
Min and max size. minmax(200px, 1fr) = min 200px, max 1fr. Good for responsive Grid.
What is grid-auto-rows?
Size for implicit rows. grid-auto-rows: 100px sets unstated row heights.
CSS Grid browser support?
Widely supported. IE11 partial—use @supports for fallback.