CSS Grid Generator

CSS Grid is the layout system for two-dimensional designs: you describe columns and rows, then put items into the cells they should occupy. It replaces a lot of nested boxes and clearing tricks, but its vocabulary of tracks, lines and spans takes time to learn. This builder lets you shape a grid on screen and copy the CSS and HTML, so you can see how each number moves the boxes.

Tracks and lines

A grid has columns and rows, collectively tracks, and invisible lines between them. A grid with three columns has four vertical lines, numbered from 1 at the left edge, and a grid with two rows has three horizontal lines, numbered from 1 at the top. Track sizes are written in a list: 200px 1fr 1fr means a fixed first column and two columns that share what remains. The unit fr stands for a fraction of the free space after fixed tracks and gaps are subtracted.

A worked example

Press Sample to load a page layout. The columns are 200px 1fr 1fr, the rows are auto 1fr auto, and both gaps are 16 pixels. The page writes display: grid;, grid-template-columns: 200px 1fr 1fr;, grid-template-rows: auto 1fr auto; and gap: 16px;. The four items are the header, the sidebar, the main area and the footer. The header is grid-column: 1 / span 3; on row 1, which starts at line 1 and covers all three columns. The sidebar is column 1 of row 2, the main area is grid-column: 2 / span 2; on row 2, and the footer spans three columns again on row 3. The middle row, written 1fr, takes all the height the header and footer do not need.

Controlling tracks

Type a track size into each field; a field with an invalid size such as 10 turns red and the page lists the problem. auto fits the content, min-content and max-content use the smallest and largest content width, and minmax(100px, 1fr) sets a floor under a flexible track. When every track in a list is the same, the page writes repeat(3, 1fr) instead of 1fr 1fr 1fr, which is shorter and easier to change. Equal gaps collapse to one gap value; different row and column gaps are written as gap: row column.

Placing items

Select an item with the numbered buttons, then set its starting column, how many columns it spans, its starting row and its row span. The preview and the CSS update together. Items that reach past the last track, such as a span of three starting at column 3 in a three-column grid, are flagged. Use the add and remove buttons to change how many items there are. Each item gets a class such as item-1 in the CSS, and the HTML block shows the matching markup.

Edge cases

Items that you leave out of explicit placement are positioned automatically by the browser, so only place the ones that need a specific cell. Overlapping is allowed in grid and is useful for layering text over an image, but this page does not block it, so check the preview. Rows set to 1fr only stretch when the container has a height. Very long content can push auto tracks wider than expected; add min-width: 0 to grid children that hold long words or code.

Limits

The builder writes line-based placement and does not generate named areas, auto-fit or subgrid. It is a learning and prototyping tool: the HTML is minimal and the classes are placeholders. Everything is computed in your browser.

Related tools

• Flexbox Generator handles one-dimensional layouts.
• CSS Columns Generator flows text into newspaper columns.
• PX to REM converts fixed track sizes to rem.
• CSS Unit Converter compares every unit used in track sizes.