What size units can I use for columns and rows?

You can use fr (fractional units), px (pixels), auto, and minmax values. Select from the dropdown for each column or row.

How many columns and rows can I create?

The tool supports up to 6 columns and 6 rows, which covers most common grid layouts.

Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.

Yes. CSS Grid is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.

Build grid layouts visually and copy the CSS code.

Columns3

Rows2

Gap8px

Column Sizes

Row Sizes

Preview

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;

Step 1

Set the number of columns and rows using the sliders.

Step 2

Choose the size for each column and row from the dropdowns.

Step 3

Adjust the gap between grid cells.

Step 4

Copy the generated CSS code with one click.

Up to 6 columns and 6 rows with independent size controls.

Support for fr, px, auto, and minmax size values.

Gap slider for consistent spacing between cells.

Live preview with numbered cells that updates in real-time.

One-click CSS code copy to clipboard.

: You can use fr (fractional units), px (pixels), auto, and minmax values. Select from the dropdown for each column or row.
: The tool supports up to 6 columns and 6 rows, which covers most common grid layouts.
: Click the copy button next to the generated CSS code at the bottom of the tool to copy it to your clipboard.
: Yes. CSS Grid is supported by all modern browsers including Chrome, Firefox, Safari, and Edge.