Skip to main content
lab.golamrabbani.org

CSS Grid Generator

Interactive CSS Grid playground with live preview and copyable CSS.

Written by Golam Rabbani, Founder & Lead Engineer

Live preview

item 1
item 2
item 3
item 4
item 5
item 6

Generated CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

How to use this css grid generator

  1. Set grid-template-columns and grid-template-rows using any valid CSS track list (e.g. "repeat(3, 1fr)" or "200px 1fr 200px").
  2. Choose a gap value such as 1rem, 16px, or 8px 16px for asymmetric column/row gaps.
  3. Optionally define grid-template-areas using one quoted row per line.
  4. Adjust the preview item count to see how items flow into the grid.
  5. Click Copy CSS to grab the generated rule; paste it into your stylesheet.

About this css grid generator

The CSS Grid generator is an interactive playground for the CSS Grid Layout module. You configure the four most-used properties — grid-template-columns, grid-template-rows, gap, and grid-template-areas — and the tool both renders a live preview and emits a clean .grid {} CSS rule you can copy into any stylesheet.

Grid is the most powerful 2-D layout system in CSS, but the syntax for track lists (1fr, minmax, repeat, auto-fit) and named areas can be hard to remember. The playground lets you tweak each value and immediately see the result, so you can learn grid by experimentation rather than by re-reading the spec. The preview pane uses the exact properties you typed — including invalid values, which simply render as the browser would in your real page — so what you see is exactly what the copied CSS will produce.

For example, setting grid-template-columns to "repeat(3, 1fr)", rows to "auto auto", gap to 1rem, and areas to three quoted lines mapping a header/sidebar/main/footer layout produces both a visible six-cell preview and a complete CSS rule using the same values. The tool runs entirely client-side; nothing is uploaded.

FAQ

What CSS Grid properties does this cover?
grid-template-columns, grid-template-rows, gap, and grid-template-areas — the four most commonly used Grid properties. For more advanced options like grid-auto-flow or align-content, edit the generated CSS in your own stylesheet.
What track values can I use?
Anything CSS Grid accepts: pixel lengths, percentages, fr units, minmax(), repeat(), auto, min-content, max-content, and combinations. The preview re-renders as you type, so invalid syntax shows up immediately.
How does grid-template-areas work?
Each quoted line is one row of the grid. Cells with the same name across adjacent cells merge into one named area. To leave a cell empty, use a dot ("."). You can then assign children with grid-area: name in your own CSS.
Does the preview show grid lines?
No. The preview shows the layout of actual children laid out by the grid; for line numbers and area names, browser devtools (Firefox and Chrome both have excellent Grid inspectors) are the best companion.
Will the generated CSS work in older browsers?
CSS Grid is supported in every modern browser. If you need to support IE11, you would need a fallback layout — Grid in IE11 used an old draft syntax and is not worth targeting in 2026.
Can I save my layout?
Copy the CSS into a file in your project — that is the canonical save location. The tool itself is stateless and intentionally does not store anything in your browser or on a server.