Define grid-template-columns, grid-template-rows, gap, and alignment — then watch a live preview and copy production-ready CSS. Use presets for common
layouts, or type full track lists including minmax() and repeat(). Everything stays in your browser.
grid-auto-rows below.
CSS Grid Layout is a two-dimensional system: you define rows and columns at once, then place content into tracks or let the browser auto-place items row by row. It is ideal for page shells, dashboards, card galleries, and any layout where you need both axes to align.
grid-template-columns and grid-template-rows describe the explicit grid. If you have more items than cells, the browser adds implicit tracks
using grid-auto-rows / grid-auto-columns and grid-auto-flow. Leaving rows empty in this tool is a common pattern for “as many rows as needed” with a fixed column
template.
Use Grid when you need aligned columns and rows in one layout. Use Flexbox for one-dimensional distribution (a single row or column of components). In practice, many sites use Grid for macro layout and Flexbox inside grid cells.
fr splits free space after fixed tracks. minmax(min, max) keeps rows or columns from collapsing too small or growing without bound — essential for responsive grids. Combine
with repeat() for concise templates.
No. Preview and CSS are generated in your browser only.
Explicit rows only create tracks you list. Extra items flow into implicit rows unless you span rows or use grid-auto-rows. Check grid-auto-flow and whether rows are empty in
the template.
dense tries to fill holes earlier in the grid when items have different sizes. It can reorder visual flow compared to the DOM — use carefully when tab order and reading order matter.
This builder focuses on track lists. You can add grid-template-areas and named grid-area rules manually in your stylesheet after copying the track and gap CSS.
The gap property (and row-gap / column-gap) is the modern way to space tracks without old grid-gap hacks. It is widely supported in current browsers.
subgrid is a separate feature for nested grids to align to a parent’s tracks. This tool does not generate subgrid rules — add them when you need nested alignment.
Browsers resolve fr and minmax() from the container size. Figma and other tools may use different box models or padding — compare in the same viewport and container width.
Not necessarily. Simple toolbars and stacks are often simpler with Flexbox. Use Grid where two-dimensional alignment saves you from nested wrappers and brittle percentages.
No. Use it to prototype and learn. Production systems should document breakpoints, spacing tokens, and grid conventions in one place.