Build a CSS grid and get the code as you go
Set your columns, rows and gaps and watch the grid-template CSS write itself, ready to copy into your project. Check the output on nested or overlapping grids, where the generated code can still get it wrong.
Know what CSS Grid Architect is generating before you paste it into a stylesheet
CSS Grid Architect turns a column-and-row layout you set up on screen into the grid-template-columns, grid-template-areas and gap values needed to build it, ready to copy into a stylesheet. This guide is for anyone who understands grid conceptually but is tired of hand-writing template-area strings and checking them against a browser to see if they line up. Work through it once and you'll know what each generated line is actually doing.
-
Define the grid
Set the number of columns and rows, or sketch the named areas you want each element to occupy.
-
Generate the CSS
Watch the layout turn into a grid-template-columns, grid-template-rows and grid-template-areas rule you can copy straight out.
-
Check it against your content
Read the generated rule against what you're actually placing in each area, since the tool has no way of knowing when a section is too small for its content and you'll need to adjust from there.
CSS Grid Architect
Choose the number of columns, rows and the gap between cells. The preview and the generated CSS below always match exactly what you set.
Live preview
Generated CSS
Why fr units instead of percentages?
The fr unit divides up the space that is left over after gaps and any fixed-size tracks have been accounted for. If you used percentages instead, the browser would have to size tracks first and then subtract the gap separately, which can push the total width past 100% and cause overflow or awkward rounding. With fr, the gap is always removed from the available space before the remaining space is shared out, so the columns or rows always fit exactly, no matter how large the gap is.
See your grid before you write a line of CSS
CSS Grid Architect turns your column counts, row counts, gaps, and track sizing into working grid-template-columns and grid-template-rows code, so you can check a layout before it goes anywhere near a stylesheet. It suits a quick prototype as much as a full design system build. Treat the output as a starting point: check it against your actual content and target browsers before you ship it.
No account needed · works on any device · free to use
Popular Tools
CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Variable Architect
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / True-Contrast Smart Palette
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Unit Converter (px / rem / em / vw / vh)
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / Aspect Ratio Calculator