Developer Tools New Tool

Free Online CSS Grid Generator with Track Units

Build a grid track by track, giving each column and row its own unit: fr, px, auto, min-content or max-content. There is an auto-fit and minmax mode for responsive columns, controls for gap, alignment and auto-flow, and you can place one item across a span of columns and rows.

Free Forever Nothing Uploaded Per track units Runs in your browser

Free Online CSS Grid Generator with Track Units

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Grid Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Cells are numbered in source order. The placed item is highlighted. Columns: 1fr 1fr

CSS

Columns Mode How many 3

Rows How many 2 grid-auto-flow

Gap and alignment row-gap 16px column-gap 16px justify-items align-items justify-content align-content

Place one item Cell number Column start span Row start span

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Grid

A few steps, and nothing is uploaded.

Choose how the columns are defined A track list gives you one editable track per column, each with its own unit. The auto-fit mode writes a single repeat rule with minmax, which is the responsive pattern most card grids want.

Set each track fr and px take a number, while auto, min-content and max-content are keywords on their own. Rows work the same way, so a header row in px above a flexible body row is two clicks.

Space and align it Row and column gap are separate. justify-items and align-items move the content inside each cell, while justify-content and align-content move the whole grid inside the container when the tracks do not fill it.

Place an item and copy Pick a cell number and give it a column and row span to see it stretch across the grid. The output is the container rule, plus a rule for the placed item when it is not a plain single cell.

What to Know About CSS Grid

Including why fr and per cent are not interchangeable.

fr is what is left over, a percentage is not. An fr track is sized from the free space remaining after gaps and fixed tracks are taken out, so repeat(3, 1fr) with a 16px gap fits exactly. Three tracks of 33.33% use the full container width and then the two gaps are added on top, which is 32px more than there is room for, so the grid overflows. If you have ever added a gap and watched a layout break, this is why. Use fr, and keep percentages for cases where you really do want a share of the container rather than a share of the space left.

auto-fit and auto-fill are not the same. With repeat(auto-fit, minmax(220px, 1fr)) the empty tracks are collapsed, so three cards stretch to fill the row. With auto-fill the empty tracks are kept, so three cards sit at 220px each and leave a gap on the right. This page writes auto-fit, which is what a card grid almost always wants, but the difference is worth knowing before you copy a rule from elsewhere.

Rows you did not define are still created. If there are more items than cells, the browser adds implicit rows sized by grid-auto-rows, which defaults to auto. That is usually fine, but it is the reason a grid can look uneven when the content is longer than expected. This page keeps the cell count equal to the track count so the preview matches the definition exactly.

This page writes one grid, and does not read CSS back in. There is no named grid-template-areas editor, no subgrid, and no way to paste an existing rule and have the controls follow it. It covers the track definition, the spacing and one placed item, which is most of what a real layout needs, but a complex named area layout is still faster to write by hand.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

A real track list Every column and row gets its own size and unit, not one shared unit.

auto-fit and minmax One switch writes the responsive repeat pattern card grids use.

Numbered preview Cells are numbered in source order, so spans are easy to follow.

Separate gaps Row and column gap are set independently, as CSS allows.

Clean output A container rule with the units written in, plus the item rule.

Runs in your browser Nothing is sent anywhere. The page works with the network off.

About the CSS Grid Generator

CSS Grid is defined by its track list, and almost everything else follows from getting that list right. The syntax allows a different unit on every track, which is what makes it genuinely two dimensional, but it also means a generator that offers one unit for the whole grid is not much use. This page gives each column and each row its own size and unit so that a 240px sidebar next to a 1fr body is as easy as three equal columns.

The auto-fit mode exists because that one pattern covers most real work. A card grid that should hold as many columns as will fit, each at least 220px wide and sharing the leftover space, is written as a single repeat with minmax, and typing it from memory is error prone. Switching modes here writes it correctly and shows you the result in a real grid container.

The fiddly part was the preview. Because the number of cells is tied to the number of tracks, changing the row count has to rebuild the cells without losing the track sizes you have already set, and placing an item has to apply to the right cell after a rebuild. The cells are numbered so that the placed item, and the way grid-auto-flow reorders things around it, can actually be seen rather than imagined.

Frequently Asked Questions

Track units, auto-fit, spans and implicit rows.

Almost always because the tracks are sized in percentages. Percentages are a share of the container, so three tracks at 33.33% already use all the width, and the gaps are then added on top. Switch the tracks to fr units, which are shares of the space remaining after gaps, and the overflow goes away without any calc.

auto-fit collapses empty tracks, so a few items stretch to fill the row. auto-fill keeps them, so items stay at their minimum size and leave empty space at the end. Use auto-fit when you want the cards to grow, and auto-fill when you want a consistent column width regardless of how many items there are.

min-content sizes a track to the widest unbreakable thing in it, which is usually the longest word, and max-content sizes it to the content laid out on one line with no wrapping. They are useful for a label column that should be exactly as wide as its longest label. Both ignore the container width, so a max-content track can overflow.

No. This tool builds the track list, the spacing, the alignment and one placed item using line numbers and spans. Named areas are a different way of writing the same placement and are often clearer for a page level layout, but they need a grid of names rather than a set of controls, so they are out of scope here.

It is safe visually but it changes the order items appear in. dense tells the browser to backfill earlier holes with later items, so the visual order stops matching the source order, which affects both reading order for screen readers and tab order. Use it for image galleries where order does not carry meaning, and avoid it for anything interactive.