Type a page layout as named areas and get grid-template-areas with a rule for each part
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.Write the layout the way you would sketch it: header header header on one line, nav main aside on the next. The page checks that every row has the same number of cells and that each name forms one rectangle, says which name breaks the rule, then writes grid-template-areas with the columns lined up and a grid-area rule for every part.
Set the options you need, or start from the example.
The result is made again every time you change something.
Copy it or download it. Nothing was sent anywhere.
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.
Template areas. Type the layout as words, one row per line:
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.
The rest of the article, and all 6 questions about CSS Grid Generator, are on the CSS Grid Generator page.
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.
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.
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 · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.