The layout spec that actually meant it, delivered in nineteen days by two browsers
The fortnight that closed the workaround era
Chrome 57 shipped on 9 March 2017. Firefox 52 followed on 28 March. Between those two dates, CSS Grid went from a specification that developers had watched Rachel Andrew demo at conferences to a feature you could ship to the majority of your users without a polyfill. No feature since has restructured the daily work of building web pages as quickly or as thoroughly.
The speed of the shift is worth sitting with. Flexbox had crept across browsers over roughly four years — the 2009 specification, the 2011 intermediate syntax with its prefixed -webkit- and -moz- properties, then the final syntax arriving piece by piece. Grid arrived coordinated. The Chrome and Firefox teams had worked off the same specification simultaneously, running parallel implementations against a shared test suite, and shipped within nineteen days of each other. Safari added support that same March; Edge followed in October. By the end of 2017, CSS Grid was available unprefixed across all four major rendering engines.
That alignment was not an accident. Jen Simmons, then at Mozilla, had spent years making the case that the web's layout system was built from compromises — float-based columns, clearfix hacks, display:table on things that weren't tables — because no purpose-built system existed. Rachel Andrew had been writing about and testing Grid against early browser implementations since 2014, maintaining what became the community's main reference for what worked and what didn't. Their advocacy contributed to both browser teams prioritising the spec on compatible timelines rather than the staggered, prefixed rollouts the field had grown accustomed to.
- 9 March 2017Chrome 57 ships CSS Grid (unprefixed)
- 28 March 2017Firefox 52 ships CSS Grid (unprefixed)
- October 2017Safari and Edge add Grid support; all four major engines covered
- December 2019Firefox 71 ships subgrid (Level 2)
- 2022Safari 16 ships subgrid
- August 2023Chrome 117 ships subgrid; full cross-engine subgrid support reached
What Grid actually was, and what it retired
Grid's formal name is CSS Grid Layout, a W3C specification whose first public working draft appeared in 2011, with the version that shipped in 2017 — Level 1 — authored principally by Tab Atkins Jr. and Elika Etemad. The feature it introduced had no precedent in the browser: a two-dimensional layout system with explicit row and column tracks, an implicit grid that expands to hold overflow content, named template areas, and the ability to place items anywhere in the grid without source-order dependency.
That last property — source-order independence — was the one that made developers stop and re-read the spec. For fifteen years, the visual order of a page had been a negotiation with the document order, mediated by floats and absolute positioning. Grid made them independent. You could set a three-column article layout in six lines:
Their advocacy contributed to both browser teams prioritising the spec on compatible timelines rather than the staggered, prefixed rollouts the field had grown accustomed to.
css .layout { display: grid; grid-template-columns: 20rem 1fr 20rem; grid-template-rows: auto; gap: 2rem; }
The sidebar, the main column and the secondary panel would sit where you put them on the grid, not where they fell in the HTML.
What Grid retired was an entire generation of layout scaffolding. Bootstrap's twelve-column float grid — which had been the default answer to "how do I make a column layout" since Bootstrap 2 launched in 2012 — became immediately redundant for new work. The clearfix, a hack that forced a container to wrap its floated children by inserting a pseudo-element with clear: both, had been pasted into stylesheets so reflexively that many developers had stopped thinking of it as a hack. Grid didn't need it. Negative margins, percentage padding tricks for aspect ratios, display: table-cell on non-table elements — the whole vocabulary of borrowed behaviour was orphaned.
The gap property (originally grid-gap, renamed to apply equally to Flexbox) replaced the guttering systems that frameworks had solved with nested padding and margin arithmetic. Named template areas — grid-template-areas: "header header" "sidebar main" — let a stylesheet describe a page layout in plain ASCII, a readability improvement that made layout code auditable in a way that float columns never were.
| Term | As used here |
|---|---|
grid-template-areas | ASCII-style property for naming layout zones in a stylesheet |
gap / grid-gap | property setting gutter width between grid tracks; renamed from grid-gap to apply to Flexbox as well |
minmax() | function defining a track size range; used with auto-fill/auto-fit for breakpoint-free responsive grids |
@supports | feature query that gates CSS to browsers that understand a given declaration; used to separate Grid layouts from IE11 fallbacks |
| clearfix | a ::after pseudo-element hack forcing a container to wrap floated children; made redundant by Grid |
| subgrid | Grid Level 2 feature letting nested grids inherit parent track definitions for cross-sibling alignment |
The year after
Browser support at the end of March 2017 was not universal. Internet Explorer 10 had shipped its own Grid implementation in 2012, based on the old specification, and it used a different, prefixed syntax — -ms-grid — that didn't map cleanly to the final spec. IE11 still held somewhere between ten and fifteen percent of desktop traffic at the time, depending on whose analytics you trusted, and many teams building corporate products saw higher. A feature query — @supports (display: grid) — could separate Grid layouts from fallbacks, and many teams ran parallel stylesheets for a year, but the IE11 drag meant production Grid took longer to reach some sectors than the browser-support tables implied.
By mid-2018, that window had largely closed for consumer web products. The tooling had moved in step: Figma's grid overlays, introduced in the years before, let designers spec column structures that mapped directly to what Grid could express, closing some of the translation loss that had always existed between a design file and a stylesheet. Ethan Marcotte's responsive design model, built on fluid grids and media queries, finally had a layout system that could express what he'd been describing with floats and percentage arithmetic — Grid columns could be fluid, fixed or minmax() ranges, and the auto-fill and auto-fit keywords made intrinsic responsive layouts possible without a single media query.
That last point landed differently than most features do. grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)) creates a column grid that adds and removes columns based on available space — no breakpoints, no media query, no JavaScript. Jen Simmons called this category of technique "intrinsic web design", distinguishing it from the breakpoint-driven model that had defined responsive work since 2010. The name didn't fully displace "responsive", but the practice it described became the default way to write card grids and product listings.
Grid Level 2, which added subgrid — the ability for a nested grid to inherit its parent's track definitions — shipped in Firefox 71 in December 2019, in Safari 16 in 2022, and in Chrome 117 in August 2023. It took until 2023 to reach the whole field, but when it did, it solved the alignment problem that Grid Level 1 had left open: items in separate grid children can now share a common track, which is what you need to align card content across rows where card heights vary.
Nothing between March 2017 and now has restructured a working day on the front end as quickly. Container queries, :has(), scroll-driven animations — each of them mattered. None of them obsoleted a decade of workarounds in a fortnight.