CSS Grid Generator

Build a two-dimensional CSS Grid visually. Configure columns, rows, track sizes, gaps, and alignment, test common presets, and copy the resulting styles into your project.

Features

Visual grid designerGrid template areasTrack sizing controlsGap and alignmentLive previewCSS code generation

CSS Grid Generator

Quick Presets

Grid Items

Number of Items

Grid Structure

Columns: 3

Rows: 2

Column Sizes

Col 1:

Col 2:

Col 3:

Row Sizes

Row 1:

Row 2:

Spacing & Alignment

Column Gap: 10px

Row Gap: 10px

justify-items

align-items

justify-content

align-content

Live Preview

Container Height:px

Grid: 3 × 2 • Items: 6

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
}

CSS Grid Quick Guide

Track Sizing

1fr - Fraction of available space

auto - Content-based size

100px - Fixed size

50% - Percentage of container

min-content - Minimum content size

max-content - Maximum content size

minmax(100px, 1fr) - Min/max range

Item Alignment

justify-items - Horizontal item alignment

align-items - Vertical item alignment

stretch - Fill the grid area

start - Align to start

end - Align to end

center - Center alignment

Container Alignment

justify-content - Horizontal grid alignment

align-content - Vertical grid alignment

space-between - Space between tracks

space-around - Space around tracks

space-evenly - Equal space everywhere

Common Patterns

repeat(3, 1fr) - Repeat function

auto-fit - Responsive columns

auto-fill - Fill with empty columns

subgrid - Inherit parent grid

Gap Properties

gap: 20px - Both row and column

column-gap: 20px - Column spacing

row-gap: 20px - Row spacing

gap: 10px 20px - Row then column

Browser Support

✅ All modern browsers

✅ IE 11 with -ms- prefix

⚠️ Gap in IE needs margins

🔧 Use autoprefixer for compatibility

How to use the CSS Grid Generator

1Choose a preset or set the desired column and row counts.
2Configure track sizing for the grid.
3Adjust row and column gaps plus container alignment.
4Review the preview and copy the generated CSS.

Common uses

Prototype dashboard and gallery layouts.
Build responsive card grids.
Learn how grid tracks, gaps, and alignment interact.

Two-dimensional layout control

CSS Grid manages columns and rows together. Generated code is a starting point, and production layouts may still need responsive breakpoints, minmax values, or named areas.

Frequently asked questions

When is Grid better than Flexbox?

Use Grid when column and row relationships both matter. Flexbox is often simpler for a single row or column.

Can I set different track sizes?

Yes. Configure the available column and row track values in the generator.

Does it generate responsive media queries?

No. Copy the base grid styles and add project-specific responsive rules as needed.

CSS Grid Generator

Features