Draw layouts with a visual CSS grid generator
This CSS grid generator lets you build a two-dimensional layout by drawing it. Set up columns and rows with fr, px, %, auto, min-content, max-content or minmax(), then drag across the cells of the canvas to create areas that span several rows and columns. Name the areas and the tool writes the matching grid-template-areas “ASCII art” for you.
Everything on the canvas is measured from a real grid in your browser: the ruler shows the computed width of every column, and the status line reports column and row sizes in pixels, so you can see exactly what 1fr or auto-fit turns into at a given width. Type a preview width to test the grid at 600px, 1280px or anything else.
You can also add auto-placed items with column and row spans, switch on dense packing, and add a one-column layout for small screens. Copy the CSS, the HTML skeleton, or Tailwind CSS classes – nothing is uploaded.
How to use the CSS Grid Generator
- Start from a preset – Page layout, 12-column, Photo gallery, Dashboard or Magazine – or edit the default page layout.
- Under “Columns” choose Fixed tracks and set each column’s size and unit, or choose auto-fill or auto-fit for a responsive column count. Add rows the same way, and set implicit rows and auto-placement if you need them.
- Drag across empty cells on the canvas to draw an area. Select it to rename it or adjust its start and end lines; use “Add auto item” for items that place themselves, with optional column and row spans.
- Set the row and column gap and the alignment options, then tick “Stack everything into one column on narrow screens” and press “Narrow” to preview the mobile layout.
- Switch between the CSS, HTML and Tailwind tabs and press the copy button.
CSS Grid Generator features
Click-and-drag areas
Draw rectangles directly on the grid; each one becomes a named area or, if areas overlap, a line-based placement such as grid-area: 1 / 3 / 3 / 4.
Every track type
fr, px, %, auto, min-content, max-content and minmax() per track, plus repeat(auto-fill | auto-fit, minmax()) for responsive columns. Identical tracks are compressed into repeat().
Measured, not guessed
Column widths and row heights come from the browser’s computed grid, shown on a ruler and in the status line.
Implicit grid and dense packing
Auto-placed items with spans, grid-auto-rows and grid-auto-flow: row dense, with implicit tracks drawn dotted.
Mobile layout
An optional media query stacks the areas into one column in reading order, and a Narrow preview shows the result.
Worked example: what 1fr means in pixels
Load “Page layout”, type 600 into the preview width and set the column gap to 20. The columns are repeat(3, 1fr), so the browser first subtracts the gaps (600 − 2 × 20 = 560px) and shares the rest equally: 560 ÷ 3 = 186.67px per column. The ruler and status line show exactly that, and the “main” area, which spans two columns, is 186.67 × 2 + 20 = 393.33px wide.
Now switch Columns to auto-fill with a 150px minimum. The browser fits as many 150px-or-wider tracks as it can – (600 + 20) ÷ (150 + 20) ≈ 3.65, so three – and stretches them to the same 186.67px. With only two items, auto-fit collapses the empty third track and each item becomes (600 − 20) ÷ 2 = 290px wide. That is the whole difference between the two keywords.
Track sizing cheat sheet
| Value | Meaning |
|---|---|
200px, 25% | Fixed size; % refers to the grid container’s width (columns) or height (rows). |
1fr | A share of the leftover space. It is really minmax(auto, 1fr), so it never shrinks below its content. |
minmax(0, 1fr) | A true equal share that may shrink below the content – what Tailwind’s grid-cols-12 uses. |
auto | Sized to content, then stretched if space is left (with the default alignment). |
min-content / max-content | The narrowest the content can be without overflowing / the width with no wrapping at all. |
repeat(auto-fill, minmax(150px, 1fr)) | As many columns as fit, each at least 150px – responsive without media queries. |
Tips for robust grids
- If one long word or wide image makes a
1frcolumn wider than the others, switch tominmax(0, 1fr). - Area names must form rectangles, and every row of
grid-template-areasneeds the same number of cells; use.for empty cells. densepacking fills holes with later items, so the visual order can differ from the HTML order – avoid it where reading order matters.- Keep the HTML in a sensible reading order; this tool writes areas top-to-bottom, left-to-right, which is also the order the mobile layout stacks them in.
- For one-dimensional rows of items, such as toolbars, the CSS Flexbox Generator is simpler. Keep image cells in proportion with the Aspect Ratio Calculator, and minify the final stylesheet with the CSS Minifier.
CSS Grid Generator FAQ
What does grid-template-areas do?
It lets you name regions of the grid with strings, one string per row, such as "header header" "sidebar main". Items are then placed with grid-area: header. This CSS grid generator writes the strings for you as you draw.
What is the difference between auto-fill and auto-fit?
Both create as many columns as fit. auto-fill keeps any empty columns, so items stay at their minimum-ish width; auto-fit collapses empty columns to zero, so a few items stretch to fill the whole row.
Why is my 1fr column wider than the others?
Because 1fr has a minimum of auto, a long word, a table or an image can force it wider. Use minmax(0, 1fr) and give images max-width: 100%.
How do I make a CSS grid responsive?
Use repeat(auto-fit, minmax(200px, 1fr)) for card grids that need no media queries, or add a media query that changes grid-template-columns and grid-template-areas – the “Small screens” option does this.
What does grid-auto-flow: dense do?
It tells the auto-placement algorithm to go back and fill earlier gaps with smaller items that come later in the HTML. It packs galleries tightly but can change the visual order.
Can grid areas overlap?
Yes, but not with grid-template-areas. Place overlapping items with line numbers, for example grid-area: 1 / 1 / 3 / 3; the tool switches to line numbers automatically when you draw an overlap.