Status of
CSS Grid Layout
implementation

Manuel Rego Casasnovas (@regocas)

BlinkOn 6 / 16-17 June 2016 (Munich)
Creative Commons Attribution-ShareAlike

About Me

CSS Grid Layout implementor (Chromium/Blink & Safari/WebKit)

Member of Igalia Web Platform Team

Igalia logo

Grid Concepts

Header
Main
Aside
Footer

Grid Lines

Header
Main
Aside
Footer
1
2
3
1
2
3
4

Grid Tracks

Grid Tracks

Rows

Header
Main
Aside
Footer

Grid Tracks

Columns

Header
Main
Aside
Footer

Grid Cells

Header
Main
Aside
Footer

Grid Areas

Header
Main
Aside
Footer

Implementation Status

Grid Containers

Property: display

Values Status
grid DONE
inline-grid DONE
subgrid TODO (at-risk) - #618969

Grid Items

Properties Status
order DONE
z-index DONE
min-size: auto DONE

Explicit Grid (I)

Properties: grid-template-columns|rows

Values Status
auto, length, percentage DONE
flex (fr unit) DONE
min-contet, max-content DONE
minmax() DONE
fit-content() TODO - #618972

Explicit Grid (I) - Example


<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
</div>
A
B
C
D

Explicit Grid (II)

Properties: grid-template-columns|rows

Values/Features Status
repeat(integer, ) DONE
repeat(auto-fill, ) DONE
repeat(auto-fit, ) WIP - #589460
Multiple tracks TODO - #619930

Explicit Grid (II) - Example


<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
    <div class="e">E</div>
    <div class="f">F</div>
</div>
A
B
C
D
E
F

Explicit Grid (III)

Properties Status
grid-template-areas DONE
grid-template shorthand DONE

Explicit Grid (III) - Example


<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
</div>
A
B
C
D

Implicit Grid (I)

Properties Status
grid-auto-columns|rows DONE
grid-auto-columns|rows multiple tracks TODO - #618970

Implicit Grid (II)

Properties Status
grid-auto-flow DONE
grid shorthand DONE
grid shorthand new syntax TODO - #618971

Placing Grid Items (I)

Properties: grid-column|row-start|end

Values Status
auto DONE
line name DONE
span DONE

Placing Grid Items (II)

Properties/Features Status
grid-column|rows shorthands DONE
grid-area shorthand DONE
Placement algorithm DONE

Placing Grid Items - Example


<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
A
B
C

Absolute Positioning

Features Status
Placement DONE
Alignment TODO - #603423

Absolute Positioning - Example

Absolute Positioning Example

Gutters

Properties/Values Status
grid-column|row-gap length DONE
grid-column|row-gap percentage WIP (at risk) - #615248
grid-gap shorthand DONE

Gutters - Example


<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
    <div class="e">E</div>
</div>
A
B
C
D
E

Alignment (I)

Properties Status
auto margins DONE
justify|align-self DONE
justify|align-items DONE
justify|align-content DONE

Alignment (I) - Example (I)


<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
A
B
C

Alignment (I) - Example (II)


<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
A
B
C

Alignment (II)

Features Status
normal value WIP - #565883
Overflow alignment DONE
Baseline alignment WIP - #412410

Grid Sizing

Features Status
Track sizing algorithm DONE
Orthogonal flows support WIP - #445742

Fragmentation

Features Status
Fragmentation algorithm TODO - #614667

Subgrids

Subgrids

Nested grid vs Subgrid example

Reduced proposal

display: subgrid;

  • Track sizing definition from the parent grid
    (no grid-template-columns|rows)
  • Subgrids have no implicit grid
    (no grid-auto-columns|rows)
  • grid-template-area can be used within the subgrid

Subgrids - Example


<form><ul>
    <li><label>Input</label><input></li>
    <li><label>Checkbox</label><input type="checkbox"></li>
    <li><button>Submit form</button></li>
</ul></form>

Performance

Optimizations to avoid re-layout in some situations

W3C Test Suite

Complete the test suite

Currently 117 tests (most unreviewed)

Import test suite once it's ready

Chrome DevTools

Add grid layout support

Ideas: show grid lines, highlight item's grid area, etc.

display: contents;

Avoid box generation

Useful for other things (not only Grid Layout)

Already supported on Firefox

Spec Status

W3C Specification

CSS Grid Layout - https://drafts.csswg.org/css-grid/

Started by Microsoft in 2010

Last Working Draft 19 May 2016

W3C Test Suite

Can I use grid? 😭

Can I use grid?

Browsers adoption 😃

Old implementation since IE 10 Prefixed: -ms
Getting ready ⚐Experimental Web Platform Features
Very close to Chrome Enabled by default on Safari Technology Preview
Getting ready too ⚐layout.css.grid.enabled

Polyfill: https://github.com/FremyCompany/css-grid-polyfill

Examples

Acknowledgements

Igalia and Bloomberg logos

Igalia and Bloomberg working together to build a better web

Thank You!