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.

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

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