CSS Grid Playground

Draw a grid from a text sketch where every row has the same cell count and named areas form rectangles, then copy the CSS.

Design & colourCssGridLayout
CSS Grid Playground screenshot
grid-template-areas

One row per line. Every row must have the same number of cells, and every named area must form a rectangle. A cell of . is left empty.

Live preview
Emitted CSS

      

More tools