ZeroServer.tools

CSS Grid Generator

Build a CSS grid layout visually and copy the generated code.

Columns

Rows

Col gap (px)

Row gap (px)

Track size

Live preview

CSS

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

Getting started with CSS Grid

CSS Grid lays out elements in two dimensions at once. Set display: grid on a container, then define columns and rows with grid-template-columns and grid-template-rows. The fr unit splits free space into flexible fractions, auto sizes to content, and fixed px tracks stay constant. Adjust the controls above and copy the result — it's generated entirely in your browser.