CSS Grid Layout

Visually build a CSS grid — set columns, rows, and gap, choose equal or custom fr tracks, then copy the generated CSS

Settings

Columns3

Rows2

Gap12px

Equal tracks (1fr each)

Preview

1

2

3

4

5

6

CSS output

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

Visually build a CSS grid — set columns, rows, and gap, choose equal or custom fr tracks, then copy the generated CSS

Settings

Columns3

Rows2

Gap12px

Equal tracks (1fr each)

Preview

1

2

3

4

5

6

CSS output

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