CSS Grid Generator

Build and inspect a Grid example

1. Set the physical sample canvas, edit individual tracks and choose flow, writing direction, gaps and alignment.
2. Edit item text and placement, move actual source order, or switch to the retained named-area rectangles. Fix active incomplete or conflicting settings before using the result.
3. Inspect the current preview and code, copy the selected CSS or HTML tab, or download the identical standalone example used by the preview.

What the declared rules mean

Grid arranges items across rows and columns. Explicit tracks come from your templates; out-of-range and automatic placement can create implicit tracks using their own repeating sizing patterns.

The fr unit shares resolved leftover space, not the outer canvas as a percentage. A bare 1fr has an automatic minimum; minmax(0px, 1fr) deliberately changes that minimum. Item automatic minima are a separate choice.

Line placement, CSS order and dense packing can change visual arrangement without changing HTML reading or default focus order. The earlier/later controls change actual source order instead.

Columns follow the inline axis and rows follow the block axis. In vertical writing those are not the usual horizontal and vertical directions. Fit only scales the shown fixed-size frame; it does not generate breakpoints.

Examples worth reasoning about

For a 640-pixel border-box width with two 1-pixel borders and 16-pixel padding, the content width is 606. With two 12-pixel gaps and one fixed 120-pixel track, 462 remains. Under the stated simple sizing assumptions, 1fr and 2fr receive 154 and 308 pixels; intrinsic constraints or scrollbars can change real sizing.

In a three-column explicit grid, line -1 means its final explicit line, even if later placement creates implicit columns. Negative tokens stay negative in generated CSS; an internal comparison coordinate is not substituted as invalid line zero.

A two-column named map can place header across the first row, nav and main in the second, and footer across the third. Each named region is one nonoverlapping rectangle, and unused cells are dots.

A bounded example, not a site builder

Each axis has 1–12 explicit tracks and 1–4 implicit-pattern entries; there are 1–12 items. The editor supports heterogeneous tracks, one-level minmax, bounded line/span placement and optional named rectangles, not arbitrary CSS or HTML.

There is no repeat, auto-fit, auto-fill, subgrid, masonry, nested layout or breakpoint generator. Fixed track counts may size flexibly, but this is not a promise of an automatically responsive production site.

Percentage tracks plus gaps can overflow. Content, fonts, automatic minima, borders and scrollbars affect native layout. The tool does not calculate exact rendered track sizes or silently shrink content to make an example look tidy.

Line mode allows deliberate overlap, but its two-definite-line profile rejects reversed or equal endpoints. Named mode requires unique names, positive in-grid rectangles and no overlap. Some refused arrangements are valid general CSS but outside this editor.

Preview and download share one complete document with an explicit zero-margin shell reset. Copied component CSS and HTML placed on an existing site can be affected by that site's rules; browser fonts, metrics and scrolling can also differ.

Local, inert examples

The generator treats sample text as escaped data and creates code locally without uploading or saving the example in history or URLs. The preview uses an empty sandbox and an early restrictive resource policy. This is a tool data-flow contract, not a universal site, browser or later-edited-file security certificate.