CSS Grid Layout Generator
Configure the columns, rows, gaps and column template of a CSS Grid layout visually, preview the grid live and copy the generated CSS with one click.
FreeOnline Tool
Loading…
How to Use
Set the following parameters in turn:
- Columns and rows: enter a whole number from 1 to 12 to decide how many columns and rows the grid has.
- Column gap and row gap: set the pixel values for column-gap and row-gap separately.
- Column template: choose "equal width (1fr each)" to divide the container evenly, "auto" to let content determine each column's width, or "fixed (200px)" to make every column 200px wide.
The preview renders columns x rows numbered cells live so you can see the grid arrangement, and the code box below stays in sync with the .container { display: grid; ... } rule. Click "Copy CSS" to copy it.
Features
This is a visual generator for CSS Grid layouts. Number inputs and dropdowns let you assemble common grid layouts without hand-writing grid-template-columns and similar syntax.
- Supports any grid from 1 to 12 columns and 1 to 12 rows.
- column-gap and row-gap are set independently, for cases where horizontal and vertical spacing differ.
- The column template offers three presets — equal width (repeat(n, 1fr)), auto (repeat(n, auto)) and fixed width (repeat(n, 200px)) — which cover most common needs.
- The preview renders the matching number of numbered cells for the current settings, making the grid arrangement immediately clear.
Use Cases
Equal-width grids
Build photo walls, product listings and other layouts made of equal-width cells.
Admin form layouts
Design fixed-width grid arrangements for form sections in an admin dashboard.
Testing spacing options
Try different row and column gap combinations quickly to find the right visual density.
Learning Grid syntax
Get familiar with grid-template-columns, gap and the other CSS Grid properties.
FAQ
What is the maximum number of columns and rows?
The inputs are limited to a range of 1 to 12, and values outside that range are not recommended. If you need more, copy the generated CSS and adjust the number inside repeat() by hand.
Can I change the 200px in the fixed column template?
The current version fixes it at 200px. For a different fixed width, choose the fixed template, copy the code and replace the 200px value manually.
Why is grid-template-rows always repeat(n, 1fr)?
The current version always divides rows equally with 1fr; only the column template offers the equal, auto and fixed choices. To customize row heights, edit the copied code by hand.
Will a large number of preview cells slow the page down?
No. The maximum is 12 columns by 12 rows, which is 144 cells — a light DOM load that modern browsers handle without any lag.