CSS Grid Generator

Set your columns and rows, drag across the cells to place items, and copy the grid CSS with matching HTML in one click.

Presets
Items
CSS
HTML
Drag across the grid to place an item.

Your grid is built right in your browser. Nothing you set here is uploaded to BroBroGo.

FAQ

How do I place items on the grid?

Press and drag across the cells to mark out a rectangle — when you let go it becomes a placed child spanning those columns and rows. Each item you draw gets its own grid-column and grid-row rule in the CSS and a matching div in the HTML. Items may overlap, and the one drawn later sits on top; use the × on an item to remove it.

Can the columns and rows be different sizes?

Yes. Every track has its own size box, and you can type any grid value there — 1fr, 200px, auto, min-content or minmax(120px, 1fr). Tracks that share the same size are folded into repeat() so the output stays short. Column gap and row gap are set on their own, and collapse to a single gap when they match.

What do I do with the generated code?

Copy the CSS and the HTML side by side. The HTML gives you the container with one div per item, and the CSS defines the grid and positions each item. Paste both into your project and you get the same layout you drew here.

Flexbox GeneratorSet up a flex container and its items with visual controls, watch the layout react live, and copy the CSS in one click.Box Shadow GeneratorDrag sliders to shape a box-shadow, stack layers for depth, and copy the finished CSS instantly.Gradient GeneratorBuild a linear, radial, or conic gradient, add color stops and set the direction, then copy the CSS in one click.Border Radius GeneratorRound each corner with sliders, shape organic blobs with the elliptical mode, and copy the CSS instantly.