fr divides only the available space. If the grid contains a 200px track, the browser first subtracts it and all gaps from the container width, then divides the remainder among the fr tracks.
/en/tool/css-grid-builder/ works calculated by the browser
Set the columns, rows, and gaps, then drag across the cells to create a named area. The output includes grid-template-areas, alignment, and markup to apply it all to.
Lines are numbered from one, and the last line is one higher than the number of tracks — numbers are shown along the edges of the preview.
Ctrl + Z undoes, Ctrl + Shift + Z redoes. The last grid is saved in the browser and reopens when you return to the page.
Preview
Output format
——Calculated by the browser. The preview is a real grid with the same properties as the generated code; after loading, the page makes no requests. Settings are stored in the URL after the hash — you can share the link.
Use a ready-made layout or start with the number of columns and the gap. When laying out a grid, rows are usually left at auto: their height is determined by the content.
Drag across the preview cells to create an area. Enter its name before drawing or rename it afterward: names go into grid-template-areas, making the layout readable without counting lines.
You can drag a finished area to move it, resize it using the handle in the lower-right corner, and delete it with the Delete key. Click to select; use the arrow keys to move it; use Shift with the arrow keys to resize it.
The container width applies to the preview itself. Move the slider from 320 to 1440 to see where the layout stops fitting; the «Narrow screen» checkbox adds a media query for that width.
The «Responsive grid» switch applies repeat(auto-fit, minmax(N, 1fr)) — a layout without media queries, where the browser calculates the number of columns.
Switch the output format on the right: CSS, SCSS, Tailwind, a style object for JSX, or styled-components. The corresponding markup is always shown next to the style code.
Column width at 1fr = (container width − gaps) ÷ number of columns
fr divides only the available space. If the grid contains a 200px track, the browser first subtracts it and all gaps from the container width, then divides the remainder among the fr tracks.
The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.
There are three gaps between four columns: 3 × 16 = 48 px. That leaves 720 − 48 = 672 px for the tracks, or 168 px per track.
The header spans the entire first row — columns 1 through 4. These are lines 1 through 5, so grid-column: 1 / 5.
The sidebar is the first column of the second row, and the content spans columns 2 through 4 of the same row. The footer again spans the full width.
All four areas are named, so a map is generated instead of line numbers: "shapka shapka shapka shapka" / "sidebar kontent kontent kontent" / "podval podval podval podval".
Each block only needs one line: .sidebar { grid-area: sidebar; } — there is no need to count line numbers anymore.
grid-template-areas with three rows, plus one grid-area declaration per block — and the HTML markup it applies to, shown alongside.
Because these are line numbers, not column numbers. A block spanning columns 1 and 2 starts on line 1 and ends on line 3. The rule is simple: the second number equals the first plus the number of columns occupied. If you name the areas, you do not need to count lines at all — you get grid-template-areas instead of line numbers.
The map is built as long as the areas do not overlap: each name must occupy one solid rectangle. As soon as two areas overlap, the map becomes invalid, and the builder silently switches to line numbers, noting this below the preview.
Not in the CSS itself, so the name is transliterated into Latin characters using the Yandex scheme: «шапка» becomes shapka, and «правый блок» becomes pravyy-blok. The original name remains the label in the markup and preview, while the Latin version goes into the code. Matching names are separated with a number.
Grid lays elements out along both axes at once and defines the grid in advance — elements are placed in ready-made tracks. Flex lays elements out along one axis, using the elements themselves to determine their sizes. A row of buttons is flex; a page layout is grid.
1fr is a share of the available space. But a track has a minimum size equal to auto, and a long unbreakable word inside it can force the track wider. Use minmax(0, 1fr) instead of 1fr to fix this — it is available in the track type list.
Use the «Responsive grid» switch: it applies repeat(auto-fit, minmax(240px, 1fr)), and the browser decides how many columns to use. The container width slider immediately shows at what width the grid changes. auto-fill leaves empty tracks, while auto-fit collapses them — the difference is immediately visible in an incomplete final row.
Yes, and it is valid: two elements can occupy the same cells, with z-index or the order in the markup determining the painting order. The builder allows overlaps, but does not build an area map for them and switches to line numbers.
The settings are stored in the URL after the hash, so you can share the link or bookmark it. The builder also keeps the latest state in the browser's memory and restores it when you return. Nothing is sent anywhere: everything is calculated on your side.
Calculates clamp() for a font size or spacing value between two viewport widths.
Open