Summary

  • The W3C's first public Grid Layout draft in April 2011 named tables, JavaScript and carefully measured floats as brittle ways to lay out web applications.
  • The December 2017 CSS Grid Level 1 Candidate Recommendation described a grid container with tracks, lines, areas, flexible sizing and automatic placement; the document's content remains in HTML while CSS arranges its visual rooms.

The table looked exhausted. It had been hired to hold rows of data, then assigned the architecture of a whole page: header on top, navigation at the side, content in the middle, advertising wherever it could be wedged. Floats and scripts joined the crew, bringing measuring tape and a prayer. A narrow screen arrived; the layout began to wobble like a cupboard on uneven legs.

That is not just an editorial joke. The W3C's first public Grid Layout Working Draft of 7 April 2011 opened by describing application layouts built from tables, JavaScript or careful measurements on floated elements. Such arrangements could be brittle when the available space changed. Some authors avoided the problem by fixing dimensions, leaving unused room on one screen and a squeeze on another. The draft proposed a layout mechanism for rows and columns without making content pretend to be a table.

A table has content structure. Its rows and cells say something about the data inside them. A grid used for visual layout needs a different job description: define positions and sizes for parts of a page. The 2011 draft drew this distinction in its abstract. A sidebar can sit beside a story without becoming a data cell in a table. The page can change its arrangement for another viewport while the underlying document still reads like a document.

The draft's early examples used properties such as grid-columns and grid-rows. Those names belong to an early proposal, not to the later CSS grammar. The historical continuity is the floor plan: authors wanted named or numbered lines and cells, predictable sizing and a way to place page parts within them. The eventual syntax matured as the specification did. Copying an old code sample into a modern stylesheet would be the architectural equivalent of building from a sketch that still labels the kitchen “maybe.”

By the W3C Candidate Recommendation of 14 December 2017, CSS Grid Layout Level 1 described a grid container and its grid items. Authors could define rows and columns as tracks, refer to lines or named areas, and let the browser place some items automatically. Tracks could be fixed or flexible; the fr unit distributed available free space among flexible tracks. A layout gained measurements that could breathe instead of a collection of coordinates nailed to one screen width.

Automatic placement deserves some credit. Not every card on a page needs a handwritten row and column address. The browser can place items into the grid according to the specified flow, creating implicit tracks when content calls for them. The author sets the rules of the floor plan; the browser does the ordinary seat assignment. For a growing collection of cards, that is less brittle than a list of positions that ends at item number twelve.

Grid also gave authors a two-dimensional way to think. A page might need a header stretching across columns, a navigation rail occupying one track and several content panels aligned beneath. Rows and columns can be coordinated together. Flexbox handles a different kind of flow especially well; this commission belongs to the specific problem of laying out a page's rooms in two directions. The table is finally allowed to return to its proper profession.

There is a limit to moving rooms around. CSS can change where an item appears, while the document's source order remains the sequence read by many tools and navigation methods. The 2017 text treats that distinction seriously. A visual design that sends the conclusion to the upper right should still make sense when read in document order. Grid lets an author move the furniture; it does not rewrite the book.

The W3C publication history for CSS Grid Layout Level 1 starts with the April 2011 Working Draft and records Candidate Recommendation Snapshots in 2016 and 2017, followed by later work. The dates mark specification documents. The useful historical arc is visible in those documents: from workarounds and early property experiments to a defined grid container, tracks, placement rules and flexible sizing.

A reader rarely asks how a page's columns were assembled. They notice when a narrow display piles panels awkwardly, when a sidebar steals the article's room or when the layout refuses to adapt. CSS Grid gave the publisher a proper floor plan and the browser a way to solve it against the space actually available. The dining table can now hold coffee, which was always a more reasonable assignment.