March 7, 2017

CSS Grid Layout ships in Firefox 52

MozillaThe organization behind Firefox — advocates open web standards and internet privacy. enabled unprefixed CSSCascading Style Sheets — the language for layout, color, and typography on web pages. Grid Layout in FirefoxMozilla's open-source browser — championed web standards and challenged Internet Explorer's dominance. 52 on March 7, 2017 — the first major browser to ship the two-dimensional layout module.

What it was for

Cascading Style SheetsCSSCascading Style Sheets — the language for layout, color, and typography on web pages. Grid lets authors define rows, columns, and named areas with `display: grid` and `grid-template-areas` — replacing float hacks and framework grid systems for page-level layout. ChromeGoogle's web browser — built on Chromium and the most widely used browser worldwide. 57 followed a week later; by late 2017 every major browser supported Grid, ending a decade of table and flexbox workarounds for two-dimensional designs.

Why it's here

CSSCascading Style Sheets — the language for layout, color, and typography on web pages. Grid was the biggest layout advance since flexbox — and FirefoxMozilla's open-source browser — championed web standards and challenged Internet Explorer's dominance. shipped it first.

Why it mattered

It gave the web a native two-dimensional layout system designed for UIUser interface — the parts of software people see and interact with. and page design.

What it solved

Complex page layouts required nested flexbox containers, floats, or JavaScript grid libraries.

Media

  • Cascading Style Sheets
    ImageCascading Style Sheets

    daPhyre (File:CSS3 and HTML5 logos and wordmarks.svg) Elfi (File:CSS3 logo and wordmark.svg) ExE Boss, CC BY 3.0, via Wikimedia Commons

Related