CSS Grid Generator Online: Build Grid Layouts Without Writing CSS

CSS Grid is the most powerful layout system in CSS, but writing grid properties by hand can be tedious — especially when you’re iterating on column counts, gap sizes, and named template areas. A CSS grid generator online lets you configure your layout visually and copy the exact CSS you need.

Try our CSS Grid Generator →

How CSS Grid Works

CSS Grid turns any container into a two-dimensional layout system. Unlike Flexbox (which arranges items along a single axis), Grid gives you explicit control over both rows and columns simultaneously.

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

This creates a 3-column grid where each column takes an equal fraction of the available width, with a 1.5rem gap between all cells.

Core Grid Properties

`grid-template-columns` and `grid-template-rows`

These define the track structure of your grid. The most common patterns:

Pattern	CSS	Result
Equal columns	`repeat(3, 1fr)`	3 equal-width columns
Fixed + fluid	`240px 1fr`	Sidebar + main content
Named areas	`[sidebar] 240px [main] 1fr`	Named column tracks
Auto-fill	`repeat(auto-fill, minmax(200px, 1fr))`	Responsive card grid
Mixed units	`200px 1fr 2fr`	Fixed, then two fluid columns

`gap` (formerly `grid-gap`)

Controls spacing between tracks. You can set row and column gaps independently:

gap: 1rem;           /* Same gap in both directions */
gap: 1rem 2rem;      /* row-gap column-gap */
row-gap: 1rem;
column-gap: 2rem;

`grid-column` and `grid-row`

Place items explicitly within the grid:

.hero {
  grid-column: 1 / -1;   /* Span full width */
  grid-row: 1 / 3;       /* Span 2 rows */
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / 5;
}

.main {
  grid-column: 2 / -1;
  grid-row: 2 / 5;
}

-1 refers to the last grid line, so 1 / -1 always spans the full width regardless of column count.

`grid-template-areas`

Named areas make complex layouts readable:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Each string in grid-template-areas represents one row. Repeated names span multiple cells. A . represents an empty cell.

Common Grid Patterns

Card Grid (Auto-Responsive)

The most common use case: a grid of cards that fills the available space and wraps naturally without media queries.

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

auto-fill creates as many columns as fit. minmax(280px, 1fr) ensures each card is at least 280px wide but grows to fill available space. No media queries needed.

Holy Grail Layout

The classic three-column layout with header and footer:

.page {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "nav     main    aside"
    "footer  footer  footer";
  min-height: 100vh;
}

Masonry-Style Grid

While true masonry requires JavaScript, you can approximate it:

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

/* Each item spans rows based on its content height */
.item { grid-row-end: span 20; }    /* Short */
.item.tall { grid-row-end: span 35; } /* Tall */

Dashboard Grid

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.widget-full    { grid-column: span 12; }
.widget-half    { grid-column: span 6; }
.widget-third   { grid-column: span 4; }
.widget-quarter { grid-column: span 3; }

Making Grid Layouts Responsive

Media Query Approach

.grid {
  display: grid;
  grid-template-columns: 1fr;          /* 1 column on mobile */
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

Auto-Fill + minmax (No Media Queries)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}

min(100%, 280px) prevents overflow on very narrow screens — a common gotcha with minmax.

Named Areas + Media Queries

.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "main    sidebar"
      "footer  footer";
  }
}

Grid vs Flexbox: When to Use Each

Both are modern layout tools. The distinction is simple:

Grid: Two-dimensional layouts. You control rows and columns. Use it for page structure, dashboards, card grids, and form layouts.
Flexbox: One-dimensional. Items flow along a single axis. Use it for navigation bars, button groups, centering a single element, and aligning items within a row.

They also compose well — a Grid layout can contain Flex containers, and vice versa.

Debugging Grid Layouts

Chrome, Firefox, and Edge all include a built-in Grid inspector. In DevTools, click the grid badge next to a grid container in the Elements panel. This overlays the grid lines directly on the page, showing column/row numbers and gaps.

Firefox’s Grid inspector is particularly strong: it highlights named areas and supports multiple simultaneous grid overlays.