1001Ferramentas
Tools Categories Guides FAQ
About Contact Privacy Policy Terms of Use
🔲 Dev

CSS Grid Generator

Build CSS Grid layouts visually: define rows, columns, gaps and alignment. Live preview and ready-to-copy CSS. Everything in your browser.

Preview

CSS Grid in 30 seconds

display: grid turns the element into a grid. grid-template-columns sets how many columns there are and how wide (1fr for a fraction of the free space, auto to fit the content). gap spaces the cells apart without margins.

repeat(N, X) repeats pattern X N times. repeat(auto-fill, minmax(180px, 1fr)) creates as many columns as fit, each at least 180px wide — exactly what a responsive card grid wants. Everything runs in the browser.

Build CSS Grid layouts visually

For two-dimensional layouts on the web nothing matches CSS Grid, yet the syntax tends to scare off beginners. This generator turns the whole thing visual: you set rows, columns, gaps and alignments by clicking and adjusting, and the grid takes shape right in front of you.

You can control how many rows and columns there are and their size, the gaps between them and the justification and alignment properties, all without writing a single line of CSS. At the end you copy the generated code, ready to paste into your project and double as a study of how each property translates.

Everything happens in the browser, no install. It helps people learning Grid and people who just want to prototype a layout in a hurry.

Frequently asked questions

I typed in the template field and the column count changed by itself. Is that a bug?
No, the two fields mirror each other. Typing in the Columns box rewrites the template as repeat(N, 1fr), and Rows becomes repeat(N, 80px), overwriting anything you had typed by hand. Going the other way, the generator reads your template, counts the tracks and updates the numbers. For uneven track sizes such as 200px 1fr 200px, type straight into the template field and leave the numeric boxes alone.
Why does the cards preset always show 6 columns in the preview?
That is the preview guessing, not the CSS. With auto-fill or auto-fit the real column count is only decided by the browser once it measures the available width, so the generator paints 6 cells just to give you something to look at. The copied code is correct: repeat(auto-fill, minmax(180px, 1fr)) creates as many columns as fit your actual container, which might mean 2 on a phone and 7 on a wide monitor.
When does the output use gap and when does it split into row-gap and column-gap?
It depends on the values. If the row gap and the column gap match (both start at 12px), you get the shorthand gap: 12px. Leave them different and you get two separate declarations. The same trimming applies to justify-items and align-items: while they sit at stretch, which is already the Grid default, the generator skips the line entirely rather than shipping a declaration that changes nothing.

Related Tools

📐

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.
🎬

prefers-reduced-motion CSS

Builds the @media (prefers-reduced-motion: reduce) block that neutralises animations, transitions and smooth scrolling, page-wide or only inside .anima.
⏳

CSS Loader Generator

Create pure-CSS spinners and loaders in 8 styles (ring, dots, pulse, bars, etc.). Adjust color, size and speed. No libs, no GIFs. Everything in your browser.
▲

CSS Triangle Generator

Create pure CSS triangles using the border trick. Choose direction (up, down, left, right), size and color. Useful for tooltips, arrows and pointers. Everything in your browser.
🪟

CSS Glassmorphism Generator

Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.
⬜

CSS Border Radius Generator

Create custom rounded shapes with 8 independent controls (4 corners × 2 axes). Live preview and ready-to-copy CSS. Everything in your browser.