← back to flaviocopes.com

CSS grid generator

← All tools

Set columns and rows, paint named areas by clicking or dragging, and copy the grid-template-areas CSS plus a matching HTML skeleton.

~~~

Grid size

Area brush

Select an area, then click or drag across cells to paint.

Paint grid

Live preview

How the named areas lay out with grid-template-areas.

~~~

Generated CSS

HTML skeleton
Preview area colors are grayscale placeholders — swap in your own styles. Everything runs in the browser.
~~~
About this tool
CSS Grid shines for two-dimensional layouts — headers, sidebars, footers, magazine-style pages. The grid-template-areasproperty lets you name regions and assign elements to them. This tool helps you sketch the area map visually instead of counting quotes in a text editor.
Paint cells with header, sidebar, main, or footer, then copy the CSS and a minimal HTML structure. Adjust column and row counts up to 8×8.
~~~
Read more