CSS Grid Shipped in Three Browsers in One Week in 2017. Nobody Had Seen Layout Work Like That Before.
In March 2017, Chrome 57, Firefox 52, and Safari 10.1 shipped CSS Grid support within a single week of each other. This coordinated rollout was not accidental. Developers at Google, Mozilla, and Apple had been tracking each other's implementation progress for months, aiming at simultaneous release across vendors. The result was that CSS Grid went from a feature with minimal real-world adoption to one available to nearly all non-Internet Explorer users within days.
The story of how Grid got there took over a decade, and understanding it reveals something about both the technical design of CSS Grid and the social process by which web standards actually get built.
Web layout has been one of the most contested areas of web development since the earliest days of HTML. The solutions developers used for the two decades before CSS Grid arrived, table-based layout followed by float-based layout followed by flexbox, each represented a workaround for the absence of a real two-dimensional layout system. Understanding what each approach lacked explains what CSS Grid finally provided.
The 30-Year Problem with Web Layout
The original HTML specification by Tim Berners-Lee in 1991 had no layout system. HTML was designed for structured documents, not page design. When graphical browsers appeared in the mid-1990s, web designers co-opted the HTML table element for multi-column layout. A table with invisible borders containing other tables could simulate a page design. By the late 1990s, table-based layout dominated.
CSS was introduced in 1996 to separate presentation from structure. The CSS Zen Garden, launched in 2003 by Dave Shea, demonstrated that identical HTML could be styled radically differently and accelerated CSS-based layout adoption. The float property, originally intended for text wrapping around images, was appropriated for multi-column layouts. Float-based layouts required clearfix hacks and workarounds for vertical alignment.
Flexbox, introduced in a CSS specification in 2009 and fully supported by 2014, solved the one-dimensional problem: aligning items along a single axis. It handles navigation bars, button groups, and card rows well. It handles the perpendicular dimension item by item, not as a coordinated structure across the full layout.
How CSS Grid Was Built
A grid-based layout concept for CSS was proposed as early as 2004 by Bert Bos, one of the CSS co-creators, but serious implementation work began when Microsoft shipped an early version of Grid in Internet Explorer 10 in 2012 under the -ms- prefix. The Microsoft implementation differed from the eventual specification, particularly in its column definition syntax, requiring a separate code path for IE compatibility.
The final CSS Grid Level 1 specification was developed primarily by Tab Atkins of Google and Elika Etemad, working within the CSS Working Group at the W3C. The specification process was substantially influenced by Rachel Andrew, a British web developer and author who spent years before the 2017 release writing tutorials for gridbyexample.com, speaking at conferences, and filing browser bugs to accelerate implementation. Andrew's sustained advocacy work, building a library of real-world Grid examples before Grid was widely supported, gave browser engineers concrete use cases to implement against and gave developers practical reference material when support finally arrived.
The coordinated browser launch in March 2017 was the result of explicit communication among browser vendors about implementation readiness. Jen Simmons at Mozilla and Rachel Andrew had been advocating for simultaneous shipping to prevent the fragmentation problem that had slowed flexbox adoption, where developers avoided using flexbox in production because not all browsers supported it yet. The simultaneous release removed that objection for Grid almost immediately.
How the Grid Model Works
CSS Grid is a two-dimensional layout system. Where flexbox handles one dimension at a time, either a row or a column, Grid handles both simultaneously. You define the complete grid structure on the container element, and items can be placed anywhere within that structure, spanning multiple rows and columns.
The grid-template-columns and grid-template-rows properties define the track structure. They accept any valid length, percentage, or the fr unit. The fr unit, introduced specifically for CSS Grid, represents a fraction of the available space after fixed and percentage sizes are allocated. One fr is one share of the remaining space. A three-column layout with equal-width columns is grid-template-columns: repeat(3, 1fr). A layout with a fixed sidebar and a flexible main area is grid-template-columns: 280px 1fr.
The repeat() notation accepts an integer count and a track sizing value, or the auto-fill and auto-fit keywords for responsive layouts. repeat(auto-fill, minmax(250px, 1fr)) creates as many 250-pixel-minimum columns as fit in the container, with each column expanding to fill available space if fewer columns fit. This single declaration replaces media query breakpoints for many responsive grid layouts, because the grid adapts automatically as the container width changes.
Grid template areas extend the column and row structure with a named zone system. The grid-template-areas property accepts quoted strings where each string represents a row, and names within the strings define which zone occupies which cell. An empty cell is written as a period. Items are then placed in zones using the grid-area property with the matching name.
A classic page layout as a grid template areas declaration looks like: header at the top spanning two columns, a sidebar on the left of the content area, content on the right, and footer spanning the full width at the bottom. Each named zone in the grid-template-areas string corresponds to an element with a matching grid-area value. The CSS describes the page structure visually in a way that matches how designers think about it, rather than requiring calculations about row numbers and column positions.
The Auto-Placement Algorithm
Grid includes an automatic placement algorithm that positions items that are not explicitly placed. When a grid contains more items than the explicitly defined areas can accommodate, Grid creates additional tracks automatically. The grid-auto-rows property sets the size of these implicit rows.
The auto-placement algorithm fills items into the next available space in row order by default. The grid-auto-flow: dense mode allows the algorithm to backfill gaps left by explicitly placed items, packing items more densely at the cost of visual source order. Dense mode is useful for image galleries where items have varying sizes and gaps would otherwise appear.
The gap property, formerly called grid-gap, sets the space between tracks. It accepts one value for equal row and column gaps, or two values for separate row and column gap sizes. Unlike margin-based spacing, grid gap does not add space outside the grid or create double-spacing between items.
When to Use Grid vs. Flexbox
The relationship between Grid and flexbox is complementary rather than competitive. They solve different layout problems.
Grid is appropriate when the layout structure in both dimensions is known in advance and elements should align to a shared coordinate system across both rows and columns. A data table, an image gallery with consistent cell sizes, a page template with defined header, sidebar, content, and footer zones, and a product grid where items should align across both rows and columns are all Grid use cases.
Flexbox is appropriate when item sizes in one dimension are content-driven and alignment in one dimension is the primary concern. A navigation bar whose items vary in text width, a row of buttons that should space themselves evenly, a card with a flexible image and variable text, and a list of tags that should wrap when the container is narrow are all flexbox use cases.
Conclusion
Many components use both: Grid for the major page structure, flexbox within each Grid cell for the layout of that cell's content. The component at the page level uses Grid. The component within the card uses flexbox. The choice at each level is independent and should match the layout behavior you need at that level.
A CSS Grid generator that lets you define columns, rows, and template areas visually, then shows the resulting CSS, makes the relationship between the visual design intent and the CSS properties explicit before any code is written.
Frequently Asked Questions
What is the fr unit in CSS Grid?
Fr stands for fraction. It represents a share of the remaining available space after fixed-size and percentage columns are allocated. Three 1fr columns create three equal-width columns.
What are CSS Grid template areas?
Grid template areas let you name regions of your grid in CSS using a visual text map, then assign elements to those regions by name using the grid-area property.
When should I use Grid vs flexbox?
Use Grid when you know the layout structure in both dimensions. Use flexbox when working with content-driven layouts where item size in one dimension is unknown or variable.