CSS Grid Generator

Your dashboard needs a layout with a fixed 240px sidebar, a main content area with 3 equal columns, and a footer that spans everything. You know CSS Grid can do it, but grid-template-columns: 240px repeat(3, 1fr) gets you the columns while grid-template-rows handles the rows — and placing items that span multiple cells means juggling grid-column and grid-row values that are hard to visualize from code alone.

Why This Tool (Not Writing Grid CSS by Hand)

CSS Grid has 18 container properties and 10 item properties. Even experienced developers use Firefox Grid Inspector to debug layouts they’ve already written. This tool lets you build the layout visually first — define columns (fr, px, auto, minmax, repeat), rows, gap, then place items by setting their column/row spans on a live grid. The generated CSS updates in real time. It’s faster than trial-and-error in a code editor, and the visual feedback catches misalignment immediately. Everything runs in your browser; no data is sent anywhere.

What Is CSS Grid?

CSS Grid Layout is a two-dimensional layout system that gives you control over rows and columns at the same time. Unlike Flexbox, which lays items out along a single axis, Grid lets you define a full layout structure — columns, rows, and gaps — on the container, then place children anywhere within that structure.

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

Grid is now supported natively in every modern browser without any vendor prefixes, and it has become the standard approach for page-level layouts, card grids, and complex UI components.

Container Properties

grid-template-columns

Defines the number and width of columns. This is the most important grid property. It accepts a space-separated list of track sizes:

Track size units:

• fr — fractional unit. 1fr takes one share of the remaining available space. 2fr takes twice as much as 1fr.
• px — fixed pixel width. Useful for sidebars and fixed-size elements.
• auto — uses the intrinsic size of the content.
• minmax(min, max) — sets a minimum and maximum size for a track. Very useful for responsive grids.
• repeat(N, size) — shorthand for repeating the same track size N times.

/* A responsive grid where each column is at least 250px */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}

grid-template-rows

Works like grid-template-columns but for rows. When omitted, the browser creates implicit rows sized to auto (fit the content).

/* Fixed header, flexible main, fixed footer */
.page-layout {
  display: grid;
  grid-template-rows: 64px 1fr 48px;
}

gap

Sets the spacing between rows and columns. The shorthand gap sets both row-gap and column-gap at once. Use separate properties when you need different values.

/* Same gap in both directions */
.grid { gap: 16px; }

/* Different row and column gaps */
.grid {
  row-gap: 24px;
  column-gap: 16px;
}

justify-items

Controls horizontal alignment of items within their grid cell. Only meaningful when the item is smaller than the cell.

align-items

Controls vertical alignment of items within their grid cell.

Item Properties

grid-column and grid-row (span)

By default, each item occupies exactly one cell. Use span N to make an item span multiple columns or rows.

/* Span 2 columns */
.wide-card { grid-column: span 2; }

/* Span 2 rows */
.tall-card { grid-row: span 2; }

/* Span both */
.feature-card {
  grid-column: span 2;
  grid-row: span 2;
}

You can also use explicit line numbers for precise placement:

/* Place item from column line 1 to line 4 (spanning 3 columns) */
.header { grid-column: 1 / 4; }

/* Place item starting at row line 2 */
.sidebar { grid-row: 2 / 4; }

justify-self and align-self

Override the container’s justify-items and align-items for a single item.

.special-item {
  justify-self: center;  /* center this item horizontally in its cell */
  align-self: end;       /* push this item to the bottom of its cell */
}

Common Grid Patterns

Responsive card grid (auto-fill):

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

This creates as many columns as fit without overflow, each at least 280px wide. The grid automatically adds or removes columns based on the container width.

Sidebar layout:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
}

Holy Grail layout (header + three columns + footer):

.page {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: 64px 1fr 48px;
}
.header { grid-column: 1 / -1; } /* span all columns */
.footer { grid-column: 1 / -1; }

Dashboard with mixed-width cards:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.chart       { grid-column: span 2; }
.full-width  { grid-column: span 4; }

Named grid areas (advanced):

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

CSS Grid vs Flexbox

Rule of thumb: Use Grid when you need to align things in two dimensions at the same time. Use Flexbox when you have a linear sequence of items to distribute or align in one direction.

Frequently Asked Questions

What is the fr unit in CSS Grid? fr stands for “fraction” — it represents a share of the remaining free space in the grid container. 1fr 2fr 1fr creates three columns where the middle one is twice as wide as the outer two. repeat(3, 1fr) creates three equal-width columns.

What is the difference between gap, row-gap, and column-gap? gap is shorthand for both. gap: 16px sets both row and column spacing to 16px. gap: 24px 16px sets row-gap to 24px and column-gap to 16px. Use row-gap and column-gap separately when you need different values.

When should I use repeat(auto-fill, minmax(...)) vs repeat(N, 1fr)? Use repeat(N, 1fr) when you want a fixed number of columns regardless of container width. Use repeat(auto-fill, minmax(min, 1fr)) for responsive grids that automatically adjust the number of columns based on available space — no media queries needed.

How do I make an item span the full width? Use grid-column: 1 / -1 (from line 1 to the last line) or grid-column: span N where N equals the total column count. The -1 trick works for any number of columns.

Can grid items overlap? Yes. By assigning the same grid-column and grid-row values to multiple items, they occupy the same cell and overlap. Control which is on top with z-index.

Does this tool send data to a server? No. All CSS generation and grid preview happens entirely in your browser. Nothing is sent to any server.