How to use the CSS Grid Generator
- Set the number of columns and rows and the gaps — or start from a preset like Holy grail.
- Edit the track sizes (above the grid for columns, left for rows):
1fr,240px,auto,minmax(0, 1fr). - Drag across cells to create an area and give it a name like
headerorsidebar. - Copy the CSS and the HTML skeleton into your project.
Grid areas in a nutshell
grid-template-areas lets you draw the layout with names: each string is a row, each word a column, and a dot (.) leaves a cell empty. Children are placed with grid-area: name, so the CSS reads like a picture of the page.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Track sizes
| Value | Meaning |
|---|---|
1fr | one share of the free space |
minmax(0, 1fr) | like 1fr, but long content can’t stretch the column |
auto | as big as the content |
240px, 20rem | a fixed size |
repeat(auto-fill, minmax(200px, 1fr)) | as many columns as fit — great for card grids |
Areas must be rectangles — the tool only lets you draw rectangles, so the CSS is always valid. For a single row or column of items, flexbox is often simpler. Related: Clamp Calculator, CSS Formatter.
Also searched as: grid layout generator, css grid builder, grid-template-areas generator, css grid template, responsive grid generator, grid css online, layout generator.
Tools that pair well with the CSS Grid Generator
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- PX to REM Converter — Convert between pixels, rem and em with your own root font size — or paste a whole stylesheet and convert every px value in one go.
Frequently asked questions
How do I create a CSS grid layout?
Set columns and rows, drag across cells to define named areas (header, sidebar, main…), and copy the generated grid-template-columns, grid-template-rows and grid-template-areas CSS with the HTML.
What is the difference between 1fr and minmax(0, 1fr)?
1fr has a minimum of its content’s size, so a long word or wide image can make the column grow. minmax(0, 1fr) allows the column to shrink below its content, keeping columns equal.
Why must grid areas be rectangles?
The CSS Grid spec only allows rectangular named areas; an L-shaped area makes the whole grid-template-areas declaration invalid.
How do I make the grid responsive?
Add a media query that redefines grid-template-columns and grid-template-areas for small screens — for example a single column with "header" "main" "sidebar".
Can I install CSS Grid Generator as a web app and use it offline?
Yes. CSS Grid Generator is an installable web app (PWA) — installed from your browser, not downloaded from an app store. Click Install app at the top of this page in Chrome or Edge (Windows, macOS, Linux, ChromeOS) or on Android, use Share → Add to Home Screen on iPhone and iPad, or File → Add to Dock in Safari 17+ on a Mac. It then opens in its own window with its own icon, and because it runs entirely in your browser it keeps working offline. Firefox on desktop can’t install web apps. How installing works.