CSS Grid Generator
Generate CSS Grid layout code by defining rows and columns visually.
Grid layouts without the syntax
CSS Grid is the powerful modern way to build two-dimensional layouts, but its syntax for defining rows, columns and areas takes practice. This lets you set up a grid visually and generates the CSS, so you get a working layout to build on without wrestling the syntax from memory.
Define your rows and columns and copy the grid CSS.
Grid versus flexbox
The useful distinction is that Grid is for two-dimensional layout — rows and columns together, like a page structure or a card grid — while flexbox handles one dimension, a row or a column of items. For a whole-page layout or anything genuinely grid-shaped, Grid is the right tool and does gracefully what used to require hacks. Its named template areas, in particular, let you sketch a layout almost visually in the CSS. Generating a starting grid and then adapting it is far quicker than assembling the track definitions by hand, and seeing the structure as you build it makes Grid's model click in a way the raw syntax often does not.
Questions & answers
When should I use Grid instead of flexbox?
Grid for two-dimensional layouts — rows and columns together, like a page structure or card grid. Flexbox for a single row or column of items.
Is Grid hard to learn?
Its syntax takes practice, but generating a starting layout visually and adapting it makes the model much clearer than writing tracks from memory.
Is anything uploaded?
No. The code is generated in your browser.