Generador de códigos QR

What CSS Grid does, and what this tool generates

CSS Grid is the layout system for two-dimensional design — rows and columns at the same time — and it replaces the float and table hacks that web developers once relied on. This generator lets you define a grid visually, drag items across cells to place and size them, and copy the exact CSS it produces. The output is plain, standard CSS Grid: it needs no framework, no build step, and works in every modern browser. The value is that the two most error-prone parts of writing grid by hand — track-size syntax and the item placement lines — are generated correctly for you.

Defining the tracks

You set the number of columns (1–12) and rows (1–8), then describe their sizes as a space-separated list. The size list is where the real power of Grid lives, and you can mix units freely:

The fr unit is what makes Grid feel effortless. Unlike percentages, fractions automatically account for the gap between tracks and for any fixed-size tracks, distributing only the remaining space. A layout of 240px 1fr gives you a fixed 240px sidebar and a main column that flexibly takes everything else — no manual subtraction required.

Placing items by dragging

The preview shows the empty grid as clickable cells. Click and drag from a starting cell to an ending cell, and the tool creates an item spanning that rectangle. Internally each item records a column start, a row start, a column span, and a row span — so an item dragged from column 1 to column 3 across the top row becomes a header that spans three columns. Every placed item is editable in the Items list below, where you can rename it and adjust its start lines and spans with number inputs, or remove it with one click on the item itself.

A worked example: a classic page layout

Build the familiar header / sidebar / main / footer layout. Set columns to 240px 1fr and rows to auto 1fr auto, with a gap of 16px. Then drag items:

• Drag across the top row, both columns — a header spanning 2 columns.
• Drag the left cell of the middle row — a sidebar in column 1.
• Drag the right cell of the middle row — the main content in column 2.
• Drag across the bottom row, both columns — a footer spanning 2 columns.

The generated CSS gives you a container with display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr auto; gap: 16px;, followed by a rule per item placing it with grid-column and grid-row — for example .header { grid-column: 1 / span 2; grid-row: 1 / span 1; }. Read 1 / span 2 as "start at line 1 and span two tracks." Those placement lines are the part people most often get wrong by hand, so having them written for you is the main time saver.

Named grid areas — the readable alternative

Tick the Named Areas option and the tool generates a different, often more maintainable form. Instead of numeric line placement, it emits a grid-template-areas map — a visual ASCII diagram of your layout in the CSS itself — and gives each item a grid-area: name;. The header/sidebar/main/footer example would produce a template like:

• grid-template-areas: "header header" "sidebar main" "footer footer";

This is genuinely powerful: the CSS now looks like the layout it describes, and rearranging the page is as simple as rewriting the diagram. Cells with no item are filled with a . dot, which is the standard syntax for an empty grid area.

Tips and common mistakes

• Match your size list to your track count. If you list three column sizes but only have two columns, the third is ignored; if you list too few, the remaining columns fall back to a sensible default. Changing the column or row count auto-pads the size list with 1fr values so it stays in sync.
• Reach for fr before %. Percentages do not subtract the gap, so 50% 50% with any gap overflows its container. Fractions handle the gap automatically — use 1fr 1fr instead.
• Named areas must form rectangles. Every named region in a grid-template-areas map has to be a solid rectangle; an L-shape or a split area is invalid CSS the browser will reject. If you assign the same name to non-adjacent cells, fix the placement so it forms a single block.
• Gap replaces margins between cells. Use the gap property for spacing between grid items rather than adding margins to the items themselves — margins fight the track sizing and break the clean fractional math.
• Don't confuse track lines with track counts. A 3-column grid has 4 vertical lines (numbered 1 through 4). grid-column: 1 / span 3 spans all three columns; thinking in spans, as this tool outputs, avoids the off-by-one errors that plague hand-written line numbers.

Privacy note

The grid is built and the CSS is generated entirely in your browser. Nothing you design is uploaded or stored on a server, so the tool works completely offline.