CSS Grid Generator Guide

What Is CSS Grid?

CSS Grid is a two-dimensional layout system that controls both rows and columns at the same time. Unlike Flexbox, which handles one axis per container, Grid lets you define the entire surface — where items sit, how tracks size, and how gaps distribute.

Use Grid when your layout involves:

• Page-level structure (sidebar + main + footer)
• Card galleries with aligned rows and columns
• Dashboard panels that span different areas
• Any design where items align in two directions

Grid replaces float hacks, inline-block workarounds, and table-based layouts with declarations the browser handles natively.

How to Use the CSS Grid Generator

A CSS Grid generator removes the trial-and-error of writing grid code by hand. Instead of guessing column widths and row heights, you adjust values visually and copy the generated CSS.

Step 1: Set Columns and Rows

Start by defining the grid structure. Enter the number of columns and rows your layout needs. Then choose a unit for each track:

• px — Fixed width. Columns stay at the exact size regardless of screen width.
• fr — Fractional unit. Distributes available space proportionally. The go-to for responsive layouts.
• % — Percentage of the container. Useful when you need strict proportions.
• auto — Sizes to content. Columns or rows shrink or grow based on what is inside them.

.grid-container {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

This creates a fixed sidebar on the left with two flexible content columns, and rows that size to their content at the top and bottom.

Step 2: Choose Track Sizes

Mix units for maximum flexibility:

.grid-container {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

The minmax() function sets a floor of 200px per column. Columns grow beyond that to fill space but never shrink below the minimum — preventing broken layouts on narrow screens.

Step 3: Adjust the Gap

Set spacing between grid items using gap:

Gaps apply only between items — never before the first item or after the last. This makes them cleaner than margin-based spacing.

Step 4: Preview and Copy

Watch the grid reshape live as you change values. When it looks right, copy the generated CSS straight into your project.

Try it yourself: CSS Grid Generator

Understanding Grid Properties

CSS Grid packs a lot of functionality into a small set of properties. Here is a quick reference for the ones you will use most:

Container Properties

Item Properties

The repeat() Function

The repeat() function saves you from writing the same track size over and over:

/* These are equivalent */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

auto-fill vs auto-fit

/* auto-fill: creates empty tracks to fill the row */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: collapses empty tracks so items expand */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Use auto-fill for consistent minimum widths. Use auto-fit when items should stretch to fill the container when space allows.

Try It Yourself

Build grid layouts visually with our CSS Grid Generator. Define columns, rows, and gaps — then copy the CSS straight into your project.

Common Grid Layouts

Holy Grail Layout

The classic web layout — header, three-column body, and footer:

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header  header"
    "left   content right"
    "footer footer  footer";
  min-height: 100vh;
  gap: 0;
}

.header  { grid-area: header; }
.left    { grid-area: left; }
.content { grid-area: content; }
.right   { grid-area: right; }
.footer  { grid-area: footer; }

Card Grid Layout

Responsive cards that reflow without media queries:

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

On a 1200px screen you get roughly four columns. On 600px you get two. On 300px you get one. No breakpoints needed.

Dashboard Layout

Asymmetrical panels for data-heavy interfaces:

.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr 1fr;
  grid-template-rows: 56px 2fr 1fr;
  grid-template-areas:
    "toolbar toolbar toolbar"
    "nav     main    aside"
    "nav     widget  aside";
  gap: 12px;
  min-height: 100vh;
}

FAQ

When should I use CSS Grid instead of Flexbox?

Use Grid when you need to control both rows and columns at the same time — page layouts, dashboards, and galleries. Use Flexbox for one-directional layouts — navigation bars, toolbars, and centered content. Many layouts combine both: Grid for the page structure, Flexbox for the components inside each grid area.

What does the fr unit do?

The fr unit distributes available space proportionally after fixed tracks and gaps are calculated. With 1fr 2fr 1fr, the middle column gets twice as much space as each outer column. Think of it as flex-grow for grid tracks.

Can I make a CSS Grid responsive without media queries?

Yes. Use repeat(auto-fill, minmax(280px, 1fr)) for columns. The browser automatically adjusts the column count based on available width. Items wrap naturally as the viewport shrinks — no breakpoints required.

Related Guides

• CSS Grid Tutorial — Step-by-step guide to grid areas, implicit grids, and responsive patterns
• CSS Layout Systems — Grid vs Flexbox comparison and when to use each