Micro Tools

CSS grid generator

Design a CSS grid layout visually: set columns, rows, and gaps, then copy the generated HTML and CSS with a live preview.

Grid settings

Columns (e.g. 1fr 1fr 1fr)

Rows (e.g. auto auto)

Gap (px)

Items

Tip: use repeat(3, 1fr), 200px, minmax(100px, 1fr), or any valid track list.

Live preview

Generated code

HTML + CSS

Design without writing code first

Type any valid track list for columns and rows, such as 1fr 2fr 1fr, repeat(4, 1fr), or 200px auto, and the preview updates instantly. Adjust the gap and item count to see exactly how the layout behaves before you touch your stylesheet.

The generated code uses a plain .grid class and numbered .cell divs, so it drops into any project with no framework needed.

Track list tips

Fractional units (fr) share leftover space proportionally, auto sizes to content, and minmax() sets flexible bounds. The repeat() function keeps long track lists readable.

The tool counts your tracks and reports the grid shape, which helps catch typos like a missing unit that would silently break the layout.

CSS Grid Generator FAQs

What track values can I use?

Any valid CSS: fr units, px, %, auto, minmax(), and repeat(). If the browser accepts it in grid-template-columns, the preview accepts it too.

Does it support named grid areas?

Not in this version. The generator focuses on track-based layouts, which cover most everyday grids like galleries and card rows.

Why do extra items wrap to new rows?

That is standard grid behavior: items beyond the defined tracks create implicit rows. Add more row tracks if you want explicit control.

Is the generated code responsive?

The code itself is plain CSS grid. For responsiveness, use fr units and minmax() in your track lists, then add media queries in your own stylesheet.

Do I need an account to use it?

No. Everything runs in the page and the code is yours to copy freely, no sign-up or attribution required.