CSS Grid Generator

Build CSS grid layouts visually — configure columns, rows, and gaps, then drag cells to create spanning grid items. The generated CSS uses grid-template-columns, grid-template-rows, and grid-column/grid-row shorthand for each item.

Columns

Rows

Col Gap

16px

Row Gap

16px

Column Widths

C1:

C2:

C3:

Row Heights

R1:

R2:

R3:

Preview (drag cells to create spans)

Click a span to remove it.

Generated CSS

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

Buy me a coffee

Tips & tricks

Use fr units for flexible, proportional columns — 1fr 2fr gives a 1:2 ratio.
Drag across cells in the preview to create grid items that span multiple columns or rows.
Click a coloured span item in the preview to remove it.
auto columns size to their content; great for sidebars with fixed content.
Use column-gap and row-gap separately to control horizontal and vertical spacing.

Related Tools

CSS Border Radius Generator

Visually generate border-radius CSS with independent corner controls and live preview.

CSS Text Shadow Generator

Create layered CSS text-shadow effects with live preview and one-click copy.

CSS Filter Generator

Generate CSS filter effects — blur, brightness, contrast, hue-rotate, saturate, sepia, and more — with a live image preview.

CSS Clip Path Generator

Generate CSS clip-path shapes interactively — polygons, circles, and ellipses — with a live preview. Drag control points.

CSS Animation Generator

Build CSS @keyframe animations visually with timing, easing, delay, and iteration controls.

CSS Flexbox Generator

Visual flexbox playground — configure flex-direction, flex-wrap, justify-content, align-items, and per-item properties.

CSS Box Shadow Generator

Build CSS box shadows visually with sliders. Add multiple layers, control blur, spread, color, and opacity.

CSS Gradient Generator

Build beautiful CSS linear and radial gradients visually. Customize colors, stops, and angle — copy the ready CSS.

CSS Gradient Text Generator

Create gradient text effects online. Pick 2–4 colors, choose direction, and copy the ready-to-use CSS background-clip code.

CSS Variables Generator

Build a complete CSS custom properties :root block for colors, spacing, typography, and border radius. Copy instantly.