CSS Grid Generator

CSS Grid Generator is an interactive visual builder for CSS Grid layouts. Configure the number of columns and rows (up to 12 × 8), set uniform or custom track sizes using any valid CSS unit (fr, px, auto, minmax()), and control column and row gaps independently.

The live preview renders your exact grid using real CSS — what you see is literally the code you get. Click and drag across cells in the preview to place a grid item that spans those rows and columns. Each item is assigned a distinct colour and appears in the items list on the left where you can remove individual items or clear them all.

The generated CSS output includes the container rule (.grid-container) and a separate rule for each placed item (.item-1, .item-2, etc.) with grid-column and grid-row span values ready to copy.

• Columns / Rows — drag the count sliders to set grid dimensions. The preview updates instantly. Adding/removing tracks also clears any items that fall outside the new bounds.
• Custom track sizes — toggle "On" to reveal per-track size inputs. Type any valid CSS value: 1fr, 200px, auto, minmax(100px, 1fr). Leave on default for equal 1fr tracks.
• Gap — set column gap and row gap independently. When they're equal, the output uses the gap shorthand; otherwise it uses row-gap col-gap.
• Placing items — in the preview, press and hold on a starting cell, drag to an ending cell, then release. The span covered becomes a new grid item with an auto-assigned colour. The cell coordinates (col×row) are shown in each cell to guide placement.
• Removing items — click the × button next to any item in the left panel's items list, or use "Clear All Items" to start over.
• Click Copy CSS to copy the complete CSS — container + all item rules.

CSS Grid is a two-dimensional layout system. Setting display: grid on a container turns its direct children into grid items. The key properties:

• grid-template-columns — defines the width of each column track. repeat(3, 1fr) creates three equal columns, each taking one third of available space. Mix units: 200px 1fr 1fr — a fixed sidebar and two flexible columns.
• grid-template-rows — same concept for row heights. Without an explicit height on the container, fr rows are sized to content. Set a fixed container height to make fr rows divide available vertical space.
• gap (formerly grid-gap) — shorthand for row-gap and column-gap. One value: equal gaps. Two values: row-gap column-gap.
• grid-column: 1 / 3 — places a child starting at column line 1 and ending at line 3 (spans 2 columns). Line numbers start at 1. -1 refers to the last line.
• grid-row: 1 / 2 — places a child in row track 1 (between lines 1 and 2).
• fr unit — "fractional unit." Distributes remaining space proportionally. After fixed/auto tracks consume their space, fr tracks share what's left.

Children without explicit placement auto-flow into the next available cell — you don't need to specify positions for every item, only for those that span multiple tracks.