CSS Grid Generator

Set up the grid, drag across cells to add items, then copy the CSS and HTML.

Columns

Rows

Column gap (px)

Row gap (px)

Column width

Row height

Container class

Drag across cells in the grid below (or click a start cell, then an end cell) to add an item. Items show their own CSS.

CSS

HTML

CSS Grid in short

CSS Grid lays out a page or component in rows and columns at the same time. The container gets display: grid and a track list for columns and rows, and each child can span several cells. It is supported by every current browser.

fr is a share of the free space: 1fr 2fr makes the second column twice as wide as the first.
repeat(4, 1fr) is short for four equal columns.
minmax(0, 1fr) stops long words or wide images from stretching a column.
auto sizes a track to its content.
gap sets the space between tracks (row gap first, then column gap).

Placing items

The generator writes each item as grid-area: row-start / column-start / row-end / column-end, using grid line numbers. Lines are counted from 1, so an item covering columns 2 to 4 ends on line 5. Items can't overlap here. Children without a grid-area fill the remaining cells in order.

Making it responsive

On small screens, wrap the grid in a media query and switch to one column: @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } .grid > * { grid-area: auto; } }. For a gallery of cards that wraps by itself, use repeat(auto-fill, minmax(200px, 1fr)) as the custom column template.

Free to useNo software to install — works in any modern browser.

No signup neededOpen the tool and start straight away.

Runs in your browserNothing you enter is sent to a server.

Works on mobileSame tool on your phone, tablet or desktop.

How it works

Enter — type or paste your values or text.
Get the result — it is worked out in your browser.
Adjust — change the inputs to compare, or copy the result.

Related tools

View all

CSS Box Shadow GeneratorDesign CSS box shadows with live sliders: offset, blur, spread, colour, opacity and inset, with layered shadows and ready presets. Text Diff CheckerCompare two texts and see exactly what was added, removed or changed, line by line or word by word. Runs in your browser. JSON to YAML ConverterConvert JSON to YAML or YAML to JSON with clear error messages and line numbers. Free, runs in your browser. CSV to JSON ConverterConvert CSV to JSON or JSON to CSV. Detects the delimiter, handles quoted fields and flattens nested JSON. Runs in your browser. Remove Duplicate LinesRemove repeated lines from a list, keeping the first copy. Options for case, spaces and empty lines. Runs in your browser. Text CleanerClean messy text: trim spaces, remove blank lines and hidden characters, fix quotes, sort lines or add numbering. Runs in your browser.

Prefer to just describe the task? The AI Assistant can convert, compress and resize files from a short instruction.

Rate this tool

Do More with MentorMakers