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

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

Use numbers (e.g. 2/1 = col-span-2 row-span-1).

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; grid-row: span 1; */ }
Tailwind
<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; falls back to safe arbitrary values like [grid-template-columns:...] when custom templates are used.

How to use the CSS Grid Builder

  1. Pick a preset (Cards or Sidebar) or set your own columns for Base / md / lg.
  2. Adjust Gap X/Y and optional Auto rows (e.g., minmax(120px, auto)).
  3. Set item col/row spans for a few items (e.g., 2/1 → col-span-2 row-span-1).
  4. Copy CSS or Tailwind and paste into your project.

Tip: Use repeat(N, 1fr) for equal columns that map cleanly to Tailwind grid-cols-N.