logo

Developer

CSS Grid Builder

Design and export responsive grid layouts. Define columns, rows, gaps, template areas, and item spans with a live preview — then copy CSS or Tailwind.

CSS Grid Builder
Client-side onlyFast & private

Input

repeat(2, 1fr) • items 8
Preview:

Tip: repeat(N, 1fr) maps to Tailwind grid-cols-N.

Numbers use col-span-N/row-span-N. Other values fall back to arbitrary properties.

Format: index: colSpan/rowSpan

Output

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
CSS
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 16px 16px;
}
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 24px;
  }
}
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 24px;
  }
}

/* Example item spans */
.item { /* grid-column: span 2 / span 2; grid-row: span 1 / span 1; */ }
Tailwind
<!-- Container -->
<div class="grid grid-cols-2 [grid-auto-rows:minmax(120px, auto)] gap-4 md:grid-cols-3 md:gap-6 lg:grid-cols-4 lg:gap-6">
  <div class="col-auto row-auto">Item 1</div>
  <div class="col-auto row-auto">Item 2</div>
  <div class="col-auto row-auto">Item 3</div>
</div>

Uses Tailwind utilities; for custom spans we output **arbitrary properties** ([grid-column:…], [grid-row:…]) which Tailwind supports.

How to use the CSS Grid Builder

  1. Pick a preset (Cards or Sidebar) or set Base / md / lg columns.
  2. Adjust Gap X/Y and optional Auto rows (e.g., minmax(120px, auto)).
  3. Set item col/row spans (numbers map to Tailwind; other tokens use arbitrary properties).
  4. Toggle the Preview (Base / md / lg) to see each breakpoint.
  5. Copy CSS or Tailwind, or Export JSON to save your setup.