Grid Builder

Visual CSS grid playground

Columns3

Rows3

Column size

Column gap12px

Row gap12px

1

2

3

4

5

6

7

8

9

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, minmax(60px, auto));
column-gap: 12px;
row-gap: 12px;

Loading tool…

About the Grid Builder

Prototype CSS Grid layouts visually: set column and row counts, pick track sizing (1fr, minmax, auto, fixed px), and adjust gaps while a live preview updates. Copy the grid-template CSS straight into your project.

How to use

1Set columns, rows, and track sizing.
2Adjust column and row gaps.
3Copy the generated grid CSS.

Related Colors & Design tools

Color Picker & Converter Gradient Generator Box Shadow Generator Flexbox Builder Border Radius Generator Font Pairing Preview

Grid Builder is part of DevKit — 100 free, privacy-first tools for developers, students, and everyone, built by Minhazul Ashim. Everything runs in your browser; your data never leaves your machine.