Build CSS Grid layouts visually with template controls.

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does CSS Grid upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

Build CSS Grid layouts visually with template controls.

Yes. Free, no signup, no ads, no data collection. Runs entirely in your browser.

Does CSS Grid upload my data?

No. All processing happens client-side in your browser. Nothing is uploaded to a server.

Kesava (https://iamkesava.com), part of the Kami Studios little tools collection at https://tools.iamkesava.com.

What does the CSS Grid builder let me do?

Define grid-template-columns and grid-template-rows visually with drag-resize tracks, set gap, and place items by dragging. The generated CSS updates live.

Does it support fr units, repeat(), and auto-fill?

Yes. Toggle between px, %, fr, auto, minmax(), and repeat() for each track. Shorthand notations like repeat(3, 1fr) are reflected in the output.

Can I place grid items manually?

Yes. Click any item to set its grid-column and grid-row start/end values, giving you named-line and span-based placement.

Is the output production-ready CSS?

Yes. Copy the container and items CSS directly. The output includes all placed items with their grid-column and grid-row values.

CSS Grid

Visual track editor — drag to span, paint named areas, copy grid-template CSS

Controls

Presets

Rows3

Columns3

Gap8px

repeat() columnsauto-fill / auto-fit with minmax

Row tracks

Column tracks

Auto flow

Named areas

Paint modeTap cells to assign the area name

Justify items

Align items

Justify content

Align content

Output

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

About this tool

What does the CSS Grid builder let me do?: Define grid-template-columns and grid-template-rows visually with drag-resize tracks, set gap, and place items by dragging. The generated CSS updates live.
Does it support fr units, repeat(), and auto-fill?: Yes. Toggle between px, %, fr, auto, minmax(), and repeat() for each track. Shorthand notations like repeat(3, 1fr) are reflected in the output.
Can I place grid items manually?: Yes. Click any item to set its grid-column and grid-row start/end values, giving you named-line and span-based placement.
Is the output production-ready CSS?: Yes. Copy the container and items CSS directly. The output includes all placed items with their grid-column and grid-row values.

About

Tap two cells to place an item spanning the rectangle between them. Toggle paint mode to assign named areas instead.

Related tools

Border Radius

Visualize and generate CSS border-radius values.

◱

Border Radius

Visualize and generate CSS border-radius values.

Open →

Box Shadow

Design CSS box shadows with visual controls.

▣

Box Shadow

Design CSS box shadows with visual controls.

Open →

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

⬡

Color Converter

Convert between HEX, RGB, HSL, and other color formats.

Open →

Color Palette

Generate harmonious color palettes with multiple harmony rules.

🎨

Color Palette

Generate harmonious color palettes with multiple harmony rules.

Open →

View all tools →