CSS Grid Generator

How to use it

1. Type the Columns (track sizes) and the Rows (track sizes). For two columns, 200px 1fr gives a fixed sidebar and a flexible main area.
2. Set the Column gap (px) and the Row gap (px), and give the container a Class name.
3. Type a name under Area name to paint, keep Paint selected and click the cells that belong to that area. Choose Erase to clear cells.
4. Copy the CSS box, or check the Preview, before you paste the rules into your stylesheet.

Track sizes and repeat()

Each track is a size in the grid: a length in px or a percentage, a flexible size in fr that shares the space left over in proportion to its number, auto, min-content or max-content. A minmax(minimum, maximum) gives a track a range. The CSS Grid Layout specification sets out how each one is sized.

repeat(3, 1fr) writes the same track three times. repeat(auto-fill, minmax(200px, 1fr)) makes as many tracks as fit the width of the box. Because that count depends on the box, every track in an auto-fill or auto-fit repeat needs a fixed size, and the tool cannot draw named areas over it.

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: row-gap column-gap;

Named areas

The grid-template-areas property takes one string for each row of the grid. The names in a string are the cells of that row, and a full stop stands for a cell that is in no area. Each name must fill one rectangle, because the browser cannot place a name in an L shape or in two separate blocks.

The names are placed on the grid by the container, and each child takes its place with grid-area. The tool writes one rule for each name, so the element with that class fills its cells.

• Use one row of names for each row of tracks, with the same number of names in every row.
• Choose names that describe the part of the page, such as header, sidebar or main, because the rules are written with those names as classes.

Frequently asked questions