Skip to content
Toolden

TOOLDENDEVELOPERON-DEVICE

CSS Grid Generator

Design a CSS grid visually, rows, columns, gap and item spans, and copy the generated CSS and HTML straight into your project.

  • Item 1colrow
  • Item 2colrow
Size the grid and stretch items across cells. The preview and code update live in the results.
1
2

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}

.item-1 {
  grid-column: span 2;
}

HTML

<div class="grid-container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
</div>

Targets .grid-container and .item-N classes. Equal 1fr tracks, edit freely.

HOW TO USE

  1. 1Set the number of rows, columns, the gap between cells, and how many items the grid holds (up to 12×12 with 16 items).
  2. 2Give individual items a column or row span so they stretch across multiple cells, like a header or a sidebar.
  3. 3Watch the preview update live as you change any setting.
  4. 4Copy the CSS and HTML with one click. The CSS targets .grid-container and .item-N classes, and the HTML matches.

EXAMPLE

INPUT

3 rows, 3 columns, 16px gap, item 1 spans 2 columns

OUTPUT

grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 16px; .item-1 { grid-column: span 2; }

FAQ

How do items with spans behave?
Items are placed in source order with the default row flow. A span tells an item to stretch across several tracks, the following items flow around it.
Why do spanned items overflow my grid?
The preview shrinks a span to the grid size. If an item needs more space than the grid has left, the flow wraps it to the next row, check the preview to see the real behavior.
Can I use other units than 1fr?
The generator uses equal 1fr tracks, which is the right default for most layouts. For fixed widths or auto tracks, edit the generated CSS directly, it is plain CSS.
Does it support responsive breakpoints?
The generated code is a single grid, without responsive breakpoints. Wrap it in a media query or use grid-auto-flow for responsive behavior.
Is my data sent anywhere?
No. All code is generated entirely in your browser, your settings never leave your device.

RELATED TOOLS

Color Palette from CSS↗CSS Gradient Generator↗Color Name Lookup↗