Shape & Layout · Free generator

CSS Grid Playground

Free · no sign-up Live preview · copy or download the CSS

Columns, rows, gap and a spanning feature cell — dial in a grid and watch twelve boxes rebuild live, then copy the template CSS exactly as configured.

Settings

Generated CSS — updates live


Ready-made examples — click any card to copy its CSS
Proven starting points. Clicking a card copies the full CSS to your clipboard.


The CSS you need to build this yourself
Understand the output, not just copy it — these lessons on our learning path teach exactly what this tool automates:
STEP 1 · 40 minCSS GridThe full lesson behind every slider here.STEP 2 · 20 minCSS Sizing & Unitsfr, minmax and the sizing vocabulary.STEP 3 · 25 minCSS Media QueriesChanging templates per breakpoint.


  1. CSS Flexbox PlaygroundShape & Layout
  2. CSS Border Radius GeneratorShape & Layout
  3. CSS Gradient GeneratorBackgrounds & Color
  4. CSS Box Shadow GeneratorShadows & Effects
  5. CSS Pattern GeneratorBackgrounds & Color
  6. CSS Hover Effects GeneratorAnimation & Motion


How it works


The columns slider writes repeat(n, 1fr) — n equal shares of the width. grid-auto-rows sizes the rows the browser creates implicitly as items wrap in. The span checkbox demonstrates a child claiming multiple tracks — watch the other items reflow around it automatically.


What the sliders can't show: named grid-template-areas let you draw entire page skeletons as ASCII art, and auto-fill/minmax makes column count respond to width with zero media queries — both covered in the Grid lesson.


Run the code — try it yourself
Build the classic app shell: a grid with columns 220px 1fr, a header spanning both columns, sidebar left, content right.


exercise.html — editable


Frequently asked questions
fr vs % — what's the difference?
fr divides space AFTER gaps are subtracted, so tracks never overflow; percentages ignore gaps and can.
Why do extra items create rows I never defined?
That's the implicit grid — grid-auto-rows sizes those automatic rows, exactly what the Rows slider controls.
Can items place themselves at exact positions?
Yes: line numbers (grid-column: 2 / 4) or named areas give exact placement; span is the shorthand for 'this many tracks from wherever I land'.
Grid or Flexbox for a card row?
One wrapping row where card count varies: either works. Strict columns that stay aligned across rows: grid.


Keep going
Grid is the page-level system — shells, galleries, dashboards. Sketch here, learn the full vocabulary in the CSS Grid lesson, and keep the Flexbox Playground for everything one-dimensional inside the cells.
CSSmatic is a non-profit project, made by developers for developers.