CSS Grid Generator
Build a CSS grid visually: set columns, rows and gaps, type your own track list or a responsive auto-fit grid, watch a live preview, see every track width worked out, and copy the CSS.
How to Use
- Choose Equal columns for
repeat(N, 1fr), Custom template to type your own track list such as200px 1fr 2fr, or Auto-fit for a responsive grid with a minimum column width. - Set the number of columns and rows, and the column and row gaps in pixels.
- Choose how each cell’s content sits with justify-items and align-items.
- Set the sample container width to see exactly how wide every track comes out; the readouts show the track widths and the size of 1fr.
- Read Show Work for the free-space and fr maths, then press Copy CSS.
Worked Example
grid-template-columns: 200px 1fr 2fr in a 600 px container with a 12 px column gap. Three columns have two gaps, 2 × 12 = 24 px. The fixed column takes 200 px, leaving 600 − 200 − 24 = 376 px of free space. The fr values add up to 1 + 2 = 3, so 1fr = 376 ÷ 3 = 125.33 px and the columns are 200, 125.33 and 250.67 px.
Equal columns. repeat(3, 1fr) in the same container: (600 − 24) ÷ 3 = 192 px each.
Auto-fit. repeat(auto-fit, minmax(160px, 1fr)) fits as many 160 px columns as it can: n × 160 + (n − 1) × 12 ≤ 600 gives n = 3 (504 px; four would need 676). The three columns then stretch to (600 − 24) ÷ 3 = 192 px.
The common mistake: percentages plus gaps. repeat(3, 33.333%) with a 12 px gap makes three columns of almost exactly 200 px plus 24 px of gaps = about 624 px, so the grid sticks out about 24 px past its 600 px container. Use 1fr, which is worked out after the gaps are taken off.
Show Work
Formulas
Where CSS Grid Came From
CSS Grid began at Microsoft: Phil Cupp’s 2011 proposal shipped, prefixed as -ms-grid, in Internet Explorer 10 in 2012. The specification was then reworked at the W3C, edited by Tab Atkins, Elika Etemad and Rossen Atanassov, and gained the fr unit, named lines, grid-template-areas and auto-placement.
March 2017 was unusual: Chrome 57, Firefox 52 and Safari 10.1 all shipped the finished, unprefixed grid within a few weeks of each other, and Edge 16 followed that October. The gaps were first called grid-gap, grid-row-gap and grid-column-gap; they were renamed to plain gap so flexbox could share them, and the old names still work as aliases. Subgrid, which lets a nested grid line up with its parent’s tracks, reached every major browser in 2023.
About This Tool
This tool writes a CSS grid three ways: equal repeat(N, 1fr) columns, any custom track list you type (fixed, fr, percentage, minmax(), auto), or a responsive auto-fit / auto-fill grid with a minimum column width. It shows the grid live with a numbered cell for every row and column, sets row and column gaps separately, and aligns the content of each cell with justify-items and align-items.
Show Work takes off the gaps and fixed tracks, divides the rest by the fr total and ends with the track widths the browser actually used, so the maths can be checked against a real layout. Everything runs in your browser. Settings can be shared with URL parameters such as ?mode=custom&tpl=200px+1fr+2fr.
Related tools: CSS Flexbox Generator, CSS clamp() Generator, and CSS Box-Shadow Generator.
Frequently Asked Questions
What is the fr unit?
One share of the space left after fixed tracks and gaps. In a 600 px grid with 200px 1fr 2fr and two 12 px gaps, the leftover is 600 − 200 − 24 = 376 px, split into 3 shares: 1fr = 125.33 px and 2fr = 250.67 px. Because it only uses what is left, an fr grid never overflows the way percentages plus gaps can.
Why does my percentage grid overflow?
Percentages are taken of the whole container and the gaps are added on top. Three columns of 33.333% in 600 px are almost exactly 200 px each, and two 12 px gaps make the total about 624 px — 24 px wider than the container. repeat(3, 1fr) takes the gaps out first and gives three 192 px columns that fit exactly.
What is the difference between auto-fit and auto-fill?
Both make as many columns as fit: repeat(auto-fill, minmax(160px, 1fr)) in 600 px with a 12 px gap fits 3 (3 × 160 + 2 × 12 = 504 px; a fourth would need 676). With fewer items than columns, auto-fill keeps the empty columns and auto-fit collapses them, so the items stretch to fill the row.
How do gap, row-gap and column-gap work?
gap sets the space between tracks only — never around the outside edge. One value applies to both directions; two values are row gap then column gap, so gap: 16px 24px means 16 px between rows and 24 px between columns. N columns always have N − 1 column gaps.
When should I use grid instead of flexbox?
Grid when you are lining things up in rows and columns at the same time — page layouts, galleries, dashboards, forms. Flexbox when items flow along one line and their own sizes matter — navigation bars, button groups, a centred box. Many pages use grid for the overall layout and flexbox inside each cell.
How do I use the CSS Grid Generator?
Just pick your options. The answer shows up right away — there is no button to press. Change anything and it updates by itself.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Card galleries
repeat(auto-fit, minmax(160px, 1fr)) gives 3 columns of 192 px at 600 px wide and adds columns as the screen grows, with no media queries.
Sidebar layouts
240px 1fr with a 12 px gap keeps the sidebar at 240 px and gives the content the other 348 px of a 600 px container.
12-column systems
Twelve 1fr columns with 16 px gutters are 85.33 px each in a 1200 px container — the classic design grid.
Dashboards
Metric tiles in a 3 × 3 grid line up in both directions, which flexbox cannot guarantee.
Forms
A max-content 1fr template lines up every label in one column and every field in the next.
Last updated: