CSS Grid Generator
Lay out a CSS grid without memorizing the syntax. Choose how many columns and rows you want, set per-track sizes, add gaps and alignment, then copy the generated grid-template rule straight into your stylesheet.
How to generate a CSS grid
- Set the number of columns and rows, then pick a size unit for each track (fr, px, rem, percent or auto).
- Add column and row gaps and choose how items and content should align inside the grid.
- Check the live numbered preview, then copy the generated .grid CSS rule into your stylesheet.
Examples
Three equal columns with a gap
columnCount 3, columnUnit fr, columnGap 16, rowGap 16
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }Sidebar plus fluid content
columns ["200px", "1fr", "auto"]
.grid { display: grid; grid-template-columns: 200px 1fr auto; }Frequently asked questions
When does the tool use repeat() instead of listing each track?
When every column or row is the same size, the tool collapses them into a repeat() call, so three equal columns become repeat(3, 1fr). If the tracks differ, it writes them out explicitly, such as 200px 1fr auto.
What is the difference between fr, px, percent and auto tracks?
An fr unit splits the leftover space into equal fractions, so two 1fr tracks each take half. px and percent set a fixed or relative width. auto sizes a track to fit its content. You can mix them to combine fixed and flexible columns.
Why are some properties missing from the generated CSS?
The generator only writes properties that differ from the CSS defaults. If a gap is zero or alignment is left on stretch and start, those lines are skipped so the output stays short and clean.
What is the difference between justify and align in grid?
justify works along the row axis (left to right) and align works along the column axis (top to bottom). The items versions position content inside each cell, while the content versions distribute the whole grid when it is smaller than its container.
Do CSS grids work in every browser?
Yes. CSS Grid is supported in every current browser, including Chrome, Firefox, Safari and Edge, so the unprefixed code this tool produces works without any fallback for modern audiences.
Is my layout sent to a server?
No. The preview and the generated CSS are built entirely in your browser as you edit, so nothing about your layout leaves your device.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
Color Palette Generator
Generate complementary, analogous, triadic, tetradic and monochromatic color palettes from one base color. Pick a hex, copy each shade as hex, RGB or HSL.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.