CSS Grid Generator

Create CSS Grid layouts with visual controls. Define grid tracks, areas, alignment, and spacing with live preview and generated CSS code.

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