CSS Grid Generator
Set up columns, rows and gaps, then drag across the grid to draw areas like header, sidebar and main. The tool writes the grid-template CSS, with named areas, plus the matching HTML.
Start from:
Sizes can be px, %, fr, auto, or minmax(200px, 1fr), separated by spaces.
How to build a CSS Grid layout
- Choose a starting layout or set the number of columns and rows, their sizes and the gap.
- Drag across cells to create an area. Click its name to rename it (for example header or main); press ✕ to remove it.
- Copy the CSS and HTML. Each area gets a class with a grid-area rule, so the HTML only needs those class names.
Grid vs flexbox
Flexbox lays items out in one direction, a row or a column, and is ideal for navigation bars, button groups and lists. CSS Grid works in two directions at once, so you can line things up in both rows and columns, which suits page layouts, dashboards, galleries and card grids. Many pages use grid for the overall layout and flexbox inside each area.
Track sizes
- fr shares out the free space:
1fr 2frgives the second column twice the room of the first. - auto sizes a row or column to its content, handy for headers and footers.
- minmax(200px, 1fr) keeps a track at least 200 px but lets it grow.
repeat(auto-fill, minmax(240px, 1fr))makes a responsive card grid that adds columns as the screen widens, with no media queries.
Named areas
grid-template-areas draws the layout as text, one quoted string per row, with a dot for empty cells. Each child then takes its place with grid-area: name. To rearrange the layout on phones, redefine the template inside a media query, for example stacking header, main, sidebar and footer in one column; the HTML does not change.
Need a different tool? Suggest it here — we read every message.
Frequently asked questions
Why must areas be rectangles?
CSS Grid only allows each named area to form a single rectangle. L-shapes or split areas make the whole template invalid, which is why this tool blocks overlapping selections.
How do I make the layout responsive?
Wrap a second grid-template-columns and grid-template-areas in a media query for small screens, for example a single column. The area names stay the same.
What does the gap property do?
It adds space between rows and columns, but not around the outside. Give two values, such as 16px 24px, for different row and column gaps.
Do all browsers support CSS Grid?
Yes, every current browser has supported it since 2017.
Is anything sent to a server?
No. Everything is calculated in your browser, and nothing you enter leaves your device.