Build a CSS grid with column sizes, gaps and named areas, live preview, CSS or Tailwind
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.Set display grid on the parent, list the column sizes in grid-template-columns, for example 200px 1fr 200px, and add a gap such as 16px. For named parts, write grid-template-areas with one quoted row per line and give each child grid-area with its name. The generator writes all of it and previews it live.
Pick a starting layout, or set the column and row sizes such as 200px 1fr 200px.
Set the gaps between rows and columns in pixels.
To place parts by name, type the template areas, one row per line, such as header header.
Check the preview, then copy the CSS or the Tailwind classes.
CSS grid places children on rows and columns you define on the parent. This generator writes that definition for you and shows the result as you type, so you can see a layout before it reaches your stylesheet.
Columns and rows. Type each track size: a length such as 200px, a share of the free space such as 1fr, auto, min-content, minmax(100px, 1fr) or fit-content(40ch). Equal tracks are written as repeat(3, 1fr). A size the grid cannot use is marked and left out, including minmax(1fr, 2fr), because a flexible fr size is not allowed as the minimum.
Template areas. Type the layout as words, one row per line:
| You type | The rule |
|---|---|
| header header | header spans two columns |
| nav main | nav and main sit side by side |
| . main | a dot is an empty cell |
Every row needs the same number of cells and each name must form one rectangle; the page names the row or area that breaks the rule. A grid-area rule is written for each name.
Responsive cards. The Auto-fit mode writes repeat(auto-fit, minmax(min(240px, 100%), 1fr)): as many columns as fit, never narrower than your minimum, with no media queries. The min() keeps a single card from overflowing a phone narrower than the minimum. Auto-fill keeps empty columns instead of stretching the cards.
Columns that never overflow. A 1fr column will not shrink below its longest word or widest image. Turn on minmax(0, …) to write minmax(0, 1fr) instead, the same thing Tailwind's grid-cols-3 does.
Tailwind classes are given for track lists and gaps and were checked by compiling them with Tailwind CSS 4; template areas have no Tailwind utility, so use the CSS for those. Everything runs in your browser. Related tools: Flexbox Generator, Border Radius Generator, PX to REM Converter.
Use grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)). The browser fits as many columns of at least 240px as the container allows and shares the leftover space between them, so cards wrap on narrow screens by themselves. Pick Auto-fit above and set the minimum card width to see it.
Both create as many columns as fit. With auto-fit, empty columns collapse to zero, so a few items stretch across the full width. With auto-fill, the empty columns stay, so items keep the size of one column and leave space at the end of the row.
A 1fr track has an automatic minimum, the width of its widest content, such as a long word, a wide image or a code block. Write minmax(0, 1fr) instead and the column can shrink below that. Turn on the minmax(0, …) switch to write every fr column that way.
Each quoted string is one row and each word in it is one cell. Repeating a name across cells makes that area span them, and a dot leaves a cell empty. Then give a child grid-area: header to place it. Every row needs the same number of cells and each area must be a rectangle.
Grid lays things out in two directions at once, rows and columns, so it suits page layouts, dashboards and card galleries. Flexbox lines items up in one direction and suits toolbars, navigation bars and centring. Many pages use grid for the outer layout and flexbox inside each part.
No. The CSS is written in your browser as you type and nothing is sent or stored. The Tailwind classes shown were checked by compiling them with Tailwind CSS 4, so the class list gives the same columns, rows and gaps as the CSS beside it.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Grid Generator and anybody who knows can answer. No account needed.
Same job, other tools: Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Sitemap Index Generator – Split a large site into numbered sitemaps with an index file.