CSS Grid generator

Grid or flexbox

The distinction that decides it is dimensionality. Grid is two-dimensional: you declare rows and columns, then place items into it. Flexbox is one-dimensional: you hand it a line of items and let their content negotiate the sizes.

So the question is whether the layout exists independently of what goes in it. A page shell, a dashboard, a card gallery whose rows line up across cards of different lengths: grids, because you could draw them before knowing the content. A toolbar, a row of tags, a nav bar where one item pushes right: flexbox, because the content decides.

They nest happily: the most common structure on the web is a grid page shell whose header is a flex row. If you are fighting one of them, you have picked the wrong axis count.

Three things people get wrong

Implicit tracks are not a bug

grid-template-columns and grid-template-rows define the explicit grid. Put in more items than there are cells and the browser silently creates implicit tracks to hold them, sized by grid-auto-rows, which defaults to auto. That is why a grid declared with three rows suddenly has five, the extra two the wrong height. Size them with grid-auto-rows, or stop declaring rows: for a card gallery the answer is repeat(auto-fill, minmax(240px, 1fr)) on the columns and implicit rows underneath.

fr is not a percentage

One fr is a share of what is left after gaps, fixed tracks and content minimums come out. A percentage is a share of the container and has no idea the gap exists, which is why three columns at 33.33% with a 16px gap overflow and three at 1fr never do. The other half: an fr track has a floor of auto, its min-content size, so one unbreakable string can push a column past its share. minmax(0, 1fr) removes the floor, which is why it turns up in every grid codebase.

gap replaced margins for a reason

A margin on a child adds space on the outside edges too, so every gutter technique before gap needed a negative margin on the parent or a :last-child override to cancel it. gap only puts space between tracks, never collapses, and behaves the same in grid and flex. It has been safe in every current browser since 2021, so margin-right on flex children can go.

What this tool writes

The container rule, plus one grid-area rule per named area in the order row-start / column-start / row-end / column-end. The end numbers are one higher than the last cell you dragged over because they are grid lines, not cells. Line numbers are used rather than grid-template-areas. Areas reach the same shapes, a floating middle region included, because . marks a cell belonging to none. What they cannot do is stay short: the template names every row in one value, so each region rewrites the block.

Everything is generated in the page. No server is in the path and nothing is uploaded.