Which Grid properties can be controlled?

grid-template-columns, grid-template-rows, gap, and more can be visually configured.

Is the fr unit supported?

Yes. fr, px, %, and other units can be used.

Can the generated CSS be used as-is?

Yes. Copy the code and paste it directly into your CSS file.

Is my data sent to a server?

All processing happens in the browser. No data is sent to a server.

Can I configure grid-template-areas?

The visual editor lets you configure columns and rows, and the generated CSS includes grid-template-columns and grid-template-rows. Named area configuration can be done by editing the output CSS manually.

CSS Grid Generator - Build Grid Layouts Visually

Set columns, rows, and gaps to visually build a grid layout. Supports fr/px/auto units.

columnTemplate

rowTemplate

gap8px

preview

columnTemplate

1fr 1fr 1fr

rowTemplate

1fr 1fr

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

How to Use

Enter number of columns and rows
Set size for each column/row (fr/px/auto)
Set gap
Preview and copy CSS

FAQ

Which Grid properties can be controlled?: grid-template-columns, grid-template-rows, gap, and more can be visually configured.
Is the fr unit supported?: Yes. fr, px, %, and other units can be used.
Can the generated CSS be used as-is?: Yes. Copy the code and paste it directly into your CSS file.
Is my data sent to a server?: All processing happens in the browser. No data is sent to a server.
Can I configure grid-template-areas?: The visual editor lets you configure columns and rows, and the generated CSS includes grid-template-columns and grid-template-rows. Named area configuration can be done by editing the output CSS manually.

Related Tools

Update History

Last Updated: 2026-02-21

2026-02-21 Initial release