Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Build a CSS Grid container's columns, rows, and gap visually.
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;CSS Grid is the standard two-dimensional layout system for arranging content in rows and columns simultaneously. This tool builds a basic equal-fraction grid container from a column count, row count, and gap, with a live preview.
Set the number of columns, rows, and the gap between cells. The preview grid and generated CSS update instantly.
grid-template-columns: repeat(N, 1fr); creates N equal-width columns (the fr unit means "one fraction of the remaining space"). The same pattern applies to rows via grid-template-rows.
For one-dimensional layouts instead, see the Flexbox Generator.
The tool opens with 3 columns, 2 rows and a 12 pixel gap. Its output has four lines: display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); and gap: 12px; The column and row inputs accept whole numbers from 1 to 12. Those rules go on the container element; the grid children need no extra CSS to appear in the cells.
Imagine a hypothetical gallery with six thumbnails. With 3 columns and 2 rows, exactly six cells exist, and the items fill them left to right, top to bottom. If you later add a seventh item, the browser creates an extra implicit row automatically. That implicit row is not covered by the repeat(2, 1fr) rule, so it takes its height from the content. This is an important point: the rows value defines only the explicit rows. For galleries that can grow, many developers drop the explicit row template altogether and let rows size themselves. You can delete that line from the output if that suits your case.
Equal-fraction rows share the available height of the container. If the container has no fixed height, there is no extra space to divide, so each row simply fits its content and the rows may not look equal. To get truly equal-height rows, give the container a height in your own CSS, for example min-height or a fixed value. Columns behave differently, because a block-level grid container already fills the available width, so equal columns work immediately.
The generated pattern is a fixed count. For a layout that adapts, a common hand edit is to replace the column line with repeat(auto-fit, minmax(200px, 1fr)), which tells the browser to fit as many 200 pixel or wider columns as will fit. Alternatively, keep the generated rule as the default and override the column count inside media queries for narrower screens. The generator does not produce these forms, but its output is a good starting skeleton.
It stands for "fraction" -- a track sized as 1fr takes an equal share of the container's remaining space after any fixed-size tracks are accounted for, similar in spirit to flexbox's flex-grow.
Yes -- CSS Grid supports fixed sizes, percentages, and mixed track sizes (e.g. 200px 1fr 1fr); this tool generates the common equal-fraction case for quick use, extendable by hand for mixed sizing.
Yes -- by default, grid items flow into the defined cells in source order, filling rows before wrapping to the next, without needing explicit placement for a simple uniform grid.
The browser adds implicit rows below the defined ones. These rows size to their content unless you define grid-auto-rows.
1fr rows only equalize when the container has a defined height. Add a height or min-height, or set grid-auto-rows for uniform sizing.
Yes, by adding grid-column: span 2 to that item in your own CSS. The generator only creates the container rules.
The tool's inputs are limited to 1 through 12 for both columns and rows, which covers most layouts. CSS itself allows more if you write it by hand.
Reference: MDN Web Docs