CSS Grid Generator

CSS Grid is the most powerful layout system ever added to the web platform. Before Grid, web developers had to choose between tables (semantically wrong, rigid, inaccessible), floats (never designed for layout, required clearfix hacks and source-order dependencies), and Flexbox (one-dimensional — excellent for rows or columns, but unable to handle both axes simultaneously). Grid was the first native CSS module designed from the ground up for two-dimensional layout, and it fundamentally changed how complex page structures are built. At its core, CSS Grid works by establishing a grid container (with `display: grid`) and then defining its tracks — the rows and columns — using either explicit track sizes or the `repeat()` function for repeated patterns. The `grid-template-columns` property defines the column structure; `grid-template-rows` defines the row structure. Each track can be sized using any CSS length unit, the `fr` (fraction) unit for proportional distribution, `auto` for content-based sizing, or the `minmax()` function for flexible minimum and maximum constraints. This tool uses `repeat(N, 1fr)` syntax, where N is your chosen number of columns or rows, and `1fr` means each track gets an equal share of the available space. The `gap` property (shorthand for `row-gap` and `column-gap`, which themselves replace the older `grid-row-gap` and `grid-column-gap`) controls the spacing between grid cells. Unlike margins, gaps only appear between adjacent tracks — there is no gap on the outer edges of the grid — which means you do not need negative margins or `:last-child` selectors to remove unwanted outer spacing. This is one of the small but enormously useful quality-of-life improvements that Gap brought to CSS layout. The `justify-items` and `align-items` properties control how individual grid items are positioned within their grid cells. `justify-items` operates along the inline (row) axis — it controls horizontal alignment of items within their column track. `align-items` operates along the block (column) axis — it controls vertical alignment of items within their row track. Both accept four values: `start` (align to the beginning of the track), `end` (align to the end), `center` (centre — note: the CSS property value uses the American spelling, though the concept itself is universal), and `stretch` (the default, which expands the item to fill the entire track). Understanding the difference between the two axes is essential: `justify-items` is horizontal, `align-items` is vertical — the same naming convention used across Grid, Flexbox, and older alignment properties. The history of CSS Grid is instructive. The first draft of a CSS grid system was proposed by Microsoft in 2011 and shipped in Internet Explorer 10 behind an `-ms-` prefix. That early implementation was functional but incomplete and used a different syntax from the final standard. The CSS Working Group spent five more years refining the specification, and the final W3C Recommendation was published in 2017. By the time Grid shipped in Firefox 52, Chrome 57, and Safari 10.1 in March 2017 — a coordinated launch across all three major browser engines in the same month — it was already a mature, well-tested specification. The simultaneous launch was unprecedented and ensured that Grid adoption was not fragmented across browsers from day one. This tool exists because writing Grid CSS by hand involves mental arithmetic that is error-prone: you need to count columns, calculate `repeat()` counts, remember which property controls which axis, and verify the result visually. By providing sliders and dropdowns that update a live preview instantly, it removes the guesswork and lets you experiment freely — try six columns, then three; try `start` alignment, then `centre`; adjust the gap from 0 to 40 px and watch the cells spread apart — and only copy the CSS once you are satisfied with what you see. It is the equivalent of a visual drag-and-drop builder, but for the fastest and most precise layout method in CSS. The Grid specification also includes more advanced features that are beyond the scope of this tool but worth knowing about for when your layouts grow more complex: named grid areas (using `grid-template-areas` and the `grid-area` property to assign semantic names to regions of the grid), implicit tracks (what happens when you place an item outside the explicitly defined grid — controlled by `grid-auto-rows` and `grid-auto-columns`), the `grid-auto-flow` property (which determines whether auto-placed items fill rows first or columns first), and subgrid (which allows a nested grid to inherit the track definitions of its parent grid). These features make Grid capable of layouts that would have required JavaScript or server-side calculation in the pre-Grid era, and learning them is the natural next step after mastering the basics that this tool helps you visualise.