Grid Generator

Visual CSS grid builder with live preview

3 cols × 2 rows

CSS Grid & Tailwind

Grid Dimension & Gap Parameters

Columns3

Rows2

Column Gap16px

Row Gap16px

Column Track Sizing

6 active cells

Cell #1

Cell #2

Cell #3

Cell #4

Cell #5

Cell #6

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 16px;
row-gap: 16px;

grid grid-cols-3 grid-rows-2 gap-x-[16px] gap-y-[16px]