CSS grid generator

CSS Grid lays out a page in rows and columns at the same time. This tool lets you build a grid visually and gives you clean code:

• Set how many columns and rows you need (up to 12 each) and their sizes.
• Set the column-gap and row-gap.
• Drag across cells (or tap two corners on a touchscreen) to create an area, then name it.
• Copy the CSS, using grid-template-areas or line numbers, and matching HTML.

Three presets get you started: a header–sidebar–main–footer page, a three-column card grid and a gallery with a featured image. Everything runs in your browser.

Each column or row size can be any valid CSS track size:

Invalid sizes are highlighted in red, so typos are easy to spot. The fr unit is the workhorse of grid layouts: 1fr 2fr gives the second column twice the space of the first.

The header–sidebar–main–footer preset produces a container rule with these properties:

Each named area then gets its own rule, such as .header { grid-area: header; }, and the HTML contains one div per area. Uncheck grid-template-areas to get line-number placement instead (grid-area: 1 / 1 / 2 / 4).

grid-template-areas vs. line numbers

Named areas make the CSS read like a picture of the layout, which is easy to understand and change. Rearranging the layout for mobile is as simple as redefining grid-template-areas in a media query.

Line numbers are more compact and work well for grids where items are placed programmatically. Both produce the same layout. Areas must be rectangles and cannot overlap; the generator warns you if a new selection would overlap an existing one.

A common pattern is to stack everything in a single column on small screens and switch to the full grid on wider ones:

• Write a one-column grid-template-areas as the default.
• Inside a min-width media query, paste the generated multi-column version.

For card grids that adapt automatically, a column definition such as repeat(auto-fill, minmax(200px, 1fr)) lets the browser decide how many columns fit. CSS Grid is supported by all current major browsers.

• Name areas after their content (header, main, sidebar), not their position, so the names still make sense after a redesign.
• Use gap instead of margins between grid items; it never adds space at the outer edges.
• Combine Grid for the page layout with Flexbox for components inside each area.

Related developer tools include the CSS minifier and the HTML formatter.

• Area names with spaces or starting with a digit. Names must be valid CSS identifiers; the generator cleans them up for you.
• Rows that don't match the column count. Every string in grid-template-areas needs one name per column; the generator always outputs complete rows.
• Forgetting the item rule. Each element needs grid-area set to its name, or it falls into the next free cell.
• Fixed widths everywhere. Mix fr units with px so the layout adapts to the screen.