Tools — 11
A layout is an argument about what matters most.
Grid or flex is not a matter of taste: two dimensions want grid, one wants flex, and choosing wrongly is how a layout ends up held together by margins. Build it here in either model, keep the same items while you switch between them, and read the CSS that comes out. If it is easier to say than to draw, describe it — a model running on your own machine will draft it into the builder, where you can still edit every value by hand.
Layout builder
Presets
Header and footer span the full width; the two rails hold their measure while the middle column absorbs the rest.
Layout model
Canvas
Drag across the dashed cells to give the selected region its shape — or drag on empty cells with nothing selected to create one. Drag a region to move it, its handles to resize it, and edit its name in place. Every region stays a rectangle, because grid-template-areas accepts nothing else.
By keyboard: arrows move the selected region, Shift with an arrow resizes it from the bottom right, and tabbing on past it reaches the four edge handles — each one moves its own edge a grid line at a time, with Home and End for the extremes and Esc to step back to the region.
Output
.layout {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 16px;
}
.layout > .header {
grid-area: header;
}
.layout > .nav {
grid-area: nav;
}
.layout > .main {
grid-area: main;
}
.layout > .aside {
grid-area: aside;
}
.layout > .footer {
grid-area: footer;
}Columns and rows
The stepper adds tracks; the raw field takes any valid track list, including repeat() and minmax(). Both write to the same state.
Each column
Each row
e.g. repeat(auto-fill, minmax(240px, 1fr))
e.g. auto 1fr auto
Gap
Linked to the row gap.
Named areas
Named areas are worth it from three regions up: the container reads as a picture of the layout instead of a column of line numbers.
Alignment
Selected item
Nothing selected. Click an item on the canvas to place it, span it, or turn it into a subgrid.
Describe it instead
Not checked yet
This talks to an Ollama running on your own machine and to nothing else. There is no key to paste and no hosted provider, because every other tool on this site promises that nothing leaves the browser and this one is not going to be the exception.
Try one of these
On the generated code
Only properties that differ from their initial value are emitted. A generator that prints twelve declarations for a two-column grid teaches you nothing about which two mattered, and the extra lines are the ones that break later.
The prompt field is off by default and talks only to an Ollama on localhost. There is no key to paste and no hosted model, because the rest of this set promises that nothing leaves your browser and one convenient exception is how that kind of promise dies.
Reference
CSS Grid places items in two dimensions at once and is the right choice when rows and columns must both align. Flexbox distributes items along one axis and is the right choice when the number of items is unknown. Named grid-template-areas is the most readable way to define a page-level grid.
When should you use CSS Grid instead of Flexbox?
Use Grid when alignment matters in both directions — a page shell, a card grid where rows must line up, a form where labels and fields share a column. Grid is defined by the container, so items land in tracks the parent declared.
Use Flexbox when content length decides the layout: a toolbar, a tag list, a row of buttons. Flexbox sizes from the content outward, which is why an unknown number of items belongs on a flex row.
They compose. A grid area containing a flex row is normal and correct, and most real layouts use both.
How do grid-template-areas work?
Each string in grid-template-areas is one row, and each word in it names the area occupying that cell. Repeating a name across adjacent cells makes that area span them, and a full stop leaves the cell empty.
Children are then placed with grid-area: header, with no line numbers anywhere. The advantage is that the CSS is a picture of the layout — a reviewer can see the shape without rendering it.
The named strings must form a rectangle. A name that appears in a non-rectangular arrangement makes the whole declaration invalid.
What does subgrid do?
subgrid makes a nested grid use its parent's tracks instead of creating its own. Set grid-template-rows: subgrid on a child and its rows align to the parent's rows.
The problem it solves is card alignment. Three cards each containing a title, body and footer will not line their footers up if each card is an independent grid, because each sizes its own rows from its own content. With subgrid they share the parent's row tracks and align across cards.
It is supported in all current browsers — Firefox from 2019, Safari from 2022, Chrome and Edge from late 2023.
How do you make a grid responsive without media queries?
repeat(auto-fit, minmax(16rem, 1fr)) creates as many columns as fit, each at least 16rem wide, and stretches them to fill the row. Column count then follows available width with no breakpoints.
auto-fill differs from auto-fit in one respect: auto-fill keeps empty tracks, auto-fit collapses them. For a card grid that should centre when nearly empty, auto-fit is usually what you want.
| Consideration | CSS Grid | Flexbox |
|---|---|---|
| Axes | Two at once — rows and columns | One at a time |
| Layout defined by | The container | The content |
| Item count | Known, or generated by auto-fit | Unknown or variable |
| Gaps | gap, row-gap, column-gap | gap, row-gap, column-gap |
| Overlapping items | Supported via line placement | Not supported |
| Aligning across siblings | Yes, including with subgrid | Only within one line |
| Typical use | Page shell, card grid, form | Toolbar, tag list, button row |
Common questions
- Should I use CSS Grid or Flexbox?
- Grid when you need alignment in two dimensions and the container defines the layout, such as a page shell or a card grid. Flexbox when items are distributed along one axis and their content decides the sizing, such as a toolbar. Most layouts use both together.
- What is subgrid used for?
- Aligning the internals of sibling elements to a shared set of tracks. The standard case is three cards whose titles, bodies and footers should line up across cards — without subgrid each card sizes its own rows from its own content and the footers do not match.
- What is the difference between auto-fit and auto-fill?
- Both create as many tracks as fit the container. auto-fill keeps empty tracks in place, so items stay at their original width; auto-fit collapses empty tracks, so the existing items stretch to fill the row.
- Does this builder export Tailwind classes?
- Yes. The same layout can be copied as plain CSS or as Tailwind v4 utility classes.
- Does the prompt field send my layout description to a cloud service?
- No. It talks to a model running on your own machine through Ollama at localhost:11434, which is a loopback address the request cannot leave. There is no hosted API option and no key to enter.