What does repeat(3, 1fr) mean?

It creates three equal-width columns. The fr unit shares the available space, so 1fr each means the columns split the row evenly.

Use Grid for two-dimensional layouts (rows and columns together) and flexbox for a single row or column.

Can I make columns different widths?

Yes. This tool uses equal 1fr columns as a starting point; edit the grid-template-columns value for custom widths like 2fr 1fr.

CSS & Design

Build a CSS grid layout visually and copy the CSS.

Free foreverRuns in your browserNo sign-up

Columns3

Rows2

gap8px

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

CSS Grid is the most powerful CSS layout system, handling rows and columns at once, but its syntax takes practice.

This generator lets you set the number of columns, rows and the gap, previews the grid live, and outputs the CSS.

It runs in your browser.

Three columns

Output: grid-template-columns: repeat(3, 1fr);

Three equal columns that share the row width evenly.

What does repeat(3, 1fr) mean?: It creates three equal-width columns. The fr unit shares the available space, so 1fr each means the columns split the row evenly.
Grid or flexbox?: Use Grid for two-dimensional layouts (rows and columns together) and flexbox for a single row or column.
Can I make columns different widths?: Yes. This tool uses equal 1fr columns as a starting point; edit the grid-template-columns value for custom widths like 2fr 1fr.