CSS Grid Generator
Design a CSS grid visually: set column and row sizes, drag across cells to create named areas and copy ready-to-use grid-template CSS and HTML. Everything happens in your browser.
Tracks
Named areas
How to use the CSS Grid Generator
- Start from a preset or the blank 3×3 grid.
- Set the tracks: type a size for each column and row (for example 200px, 1fr or minmax(100px, 1fr)) and use + Column / + Row to add more.
- Drag across cells in the preview to create a named area, then rename it in the Named areas list.
- Adjust the gaps and, if needed, a min-height such as 100vh. Tick Stack areas on mobile for a responsive layout.
- Press Copy CSS and Copy HTML and paste them into your project.
CSS grid track sizes explained
| Track size | Meaning | Typical use |
|---|---|---|
200px | Fixed size | Sidebars, icon columns |
25% | Percentage of the container | Rarely needed; fr is usually better because it accounts for gaps |
1fr | One share of the free space (min. content size) | Main content, equal columns |
auto | Sized to content | Header and footer rows |
min-content | As narrow as the longest word or widest item | Tight label columns |
max-content | As wide as the content without wrapping | Columns that must not wrap |
minmax(200px, 1fr) | At least 200px, grows to one share | Flexible columns with a minimum |
fit-content(300px) | Content size, but no wider than 300px | Sidebars that adapt to their content |
Worked example: how fr is calculated
A container is 1000px wide with grid-template-columns: 200px 1fr 2fr and column-gap: 20px. Two gaps take 40px and the fixed column takes 200px, leaving 1000 − 200 − 40 = 760px of free space. That is split into 1 + 2 = 3 shares of about 253.3px, so the second column is 253.3px wide and the third 506.7px. If the container shrinks to 700px, the shares become (700 − 240) ÷ 3 ≈ 153.3px, while the first column stays at 200px.
Template areas rules and tips
- One string per row, one token per column. Every row string must have the same number of cells as there are columns.
- Rectangles only. Each name must cover a single rectangle; the tool enforces this by only letting you drag rectangles and blocking overlaps.
- Dots are empty cells. A
.(or several dots like...) marks a cell that no named area uses. - Names are identifiers. Use letters, digits, hyphens and underscores, and do not start with a digit.
- Source order still matters. Areas change where things appear, not the reading order for screen readers. Keep your HTML in a logical order (header, nav, main, aside, footer).
- Line numbers are an alternative.
grid-area: 1 / 1 / 2 / 4means row-start / column-start / row-end / column-end, with lines counted from 1.
For one-dimensional rows of items inside an area, combine grid with flexbox. When you are done, tidy the output with the CSS Formatter and HTML Formatter.
Frequently asked questions
What does the fr unit mean in CSS grid?
fr is a fraction of the free space in the grid container. With grid-template-columns: 1fr 2fr, the remaining width (after fixed tracks and gaps) is split into 3 parts: the first column gets one part and the second gets two.
How does grid-template-areas work?
You write one quoted string per row, with one name per column. Repeating a name across neighbouring cells makes that area span them, and a dot (.) leaves a cell empty. Each child then gets grid-area: name. Every named area must form a single rectangle.
Why can't my areas be L-shaped or overlap?
The CSS specification only allows rectangular named areas in grid-template-areas; an L-shape or a gap in a name makes the whole declaration invalid. Items placed by line numbers can overlap, but named areas from the template cannot.
What is the difference between 1fr and minmax(0, 1fr)?
1fr really means minmax(auto, 1fr), so a column will not shrink below its content's minimum width, which can cause overflow with long words or wide images. minmax(0, 1fr) lets the column shrink fully, keeping columns truly equal.
What does auto mean for a row or column?
An auto track sizes to its content, between the content's minimum and maximum size. It is ideal for headers and footers. In this tool's preview, empty auto tracks are given a 40px minimum so you can still see and select them.
How do I make a CSS grid responsive?
Use a media query that changes grid-template-columns and grid-template-areas on small screens, often to a single column. Tick Stack areas on mobile to have that media query generated, ordered top to bottom and left to right. For card grids, repeat(auto-fill, minmax(200px, 1fr)) is another common pattern.
Should I use grid or flexbox?
Use grid when you lay out both rows and columns at once, such as page templates and dashboards. Use flexbox for content that flows in one direction, such as navigation bars, toolbars and button groups. They work well together: a grid area can be a flex container.