CSS Grid Generator

Set a number of columns, rows, and a gap to instantly get the corresponding CSS Grid code, with a live preview.

Example:

How it works

CSS Grid lets you define a two-dimensional grid in a single property, unlike Flexbox which handles only one axis at a time. This tool generates a grid-template-columns and grid-template-rows with equally sized columns and rows (1fr), handy for an image gallery or a dashboard in one click.

What does "1fr" mean in the generated code?

The fr (fraction) unit distributes the available space equally between columns or rows; repeat(3, 1fr) therefore creates three equal-width columns sharing all the container's space.

Can I have columns of different sizes?

Yes, this tool generates a simple starting point with equal columns; you can then manually edit grid-template-columns to use fixed or varied values like 200px 1fr 2fr.

100% local processing: the code is generated entirely in your browser via WebAssembly.