CSS Grid Generator

Design Tools

Visual CSS grid builder with code to copy

FreePrivateInstant
Columns
Custom columns (optional, e.g. 1fr 2fr 1fr)
Row height
gap
12px
justify-items
align-items
Items
9
1
2
3
4
5
6
7
8
9
CSS
.grid{background:#e0f2fe;border-radius:12px;padding:10px}.cell{min-height:44px;padding:10px;background:#0284c7;color:#fff;font:700 15px sans-serif;border-radius:8px;text-align:center}.cell:nth-child(5n){background:#0369a1}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 12px;
}
HTML
<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
</div>

The .cell styles in the preview are only for display — copy .grid for your layout.

Embed this tool on your websiteFree
  1. Choose how tall the frame should be.
  2. Press Copy code.
  3. Paste it into your page, blog, WordPress or Notion HTML block.
Height
Live previewAll embeddable tools

The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.

Similar tools you may like

CSS Animation GeneratorReady CSS keyframes with live preview
CSS Flexbox GeneratorVisual flexbox playground with copyable CSS
CSS Gradient GeneratorCreate linear & radial CSS gradients
CSS Box Shadow GeneratorVisual box-shadow builder with CSS output
CSS Text Shadow GeneratorCreate glow and drop shadows for text
Border Radius GeneratorMake rounded corners and blobs in CSS

History

All history →

CSS Grid Generator — at a glance

Visual CSS grid builder with code to copy.

Your choices
3 columns
gap 12px
Generate
Result
.grid { display:grid … }

How to use it — step by step

Just your input — nothing to install or sign up for.

1

Set columns and rows

Choose columns, gap and alignment, or type your own template.

2

Check the preview

Items fill the grid as you change the settings.

3

Copy the code

Press Copy CSS (and Copy HTML) and paste into your project.

Pro tips

Small things that make the result better.

✦Use fr units for flexible columns.
✦repeat(auto-fit, minmax(160px, 1fr)) makes a responsive grid without media queries.

Quick facts

Freeno signup, no limit
Instantresult in a moment
Privatenothing is uploaded
Any devicephone, tablet or PC

Frequently Asked Questions

Is my data safe?+

Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.

Is this tool really free?+

Yes — completely free, no signup, no watermark and no usage limit.

More Free Tools

Guides you might like

All guides →
Color ConverterHEX, RGB and HSL: three ways to write the same colour, and which to use
PX to REM Converterpx vs rem: why your font sizes should be allowed to scale
Aspect Ratio Calculator16:9, 4:3, 1:1: aspect ratios without cropping surprises
Color Contrast CheckerIs your text readable? The contrast ratio, explained