CSS Grid Layout
from the inside out

Manuel Rego Casasnovas (@regocas)

HTML5DevConf Autumn 2015 / 19-20 October 2015 (San Francisco)
Creative Commons Attribution-ShareAlike

About Me

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

Member of Igalia Web Platform Team

Igalia logo

Grids everywhere

The New York Times Website

1996

The New York Times Website in 1996

Evolution

<table>

😱

float

😰

display: inline-block;

😵

display: table;

😠

CSS Frameworks

😏

display: flex;

😊

display: grid;

😅

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

display: grid;

New formatting context

Track sizing

grid-template-columns & grid-template-rows

Create boxes from CSS!

Track sizing 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

Placement properties

grid-column & grid-row

DOM order ≠ Visual order

Accessibility

Placement example


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

Named grid lines

Use custom identifiers to reference lines

A line can have several names

Named lines example


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

Grid areas

grid-template-areas

   ###     ######   ######  #### ####       ###    ########  ########
  ## ##   ##    ## ##    ##  ##   ##       ## ##   ##     ##    ##
 ##   ##  ##       ##        ##   ##      ##   ##  ##     ##    ##
##     ##  ######  ##        ##   ##     ##     ## ########     ##
#########       ## ##        ##   ##     ######### ##   ##      ##
##     ## ##    ## ##    ##  ##   ##     ##     ## ##    ##     ##
##     ##  ######   ######  #### ####    ##     ## ##     ##    ##

Grid areas 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

Alignment

CSS Box Alignment spec

Horizontal & vertical centering!

Items alignment example


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

Tracks alignment example


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

Grid gutters

grid-row-gap & grid-column-gap

Grid 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

Auto-placement

grid-auto-flow

Auto-placement example


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

Responsive grids

Flexible track sizing

Media Queries

Responsive grid example


.grid {
    display: grid;
    grid: 200px 1fr / 100px 1fr auto;
    grid-template-areas: "header header"
                         "aside  main  "
                         "aside  footer";
}

@media (max-width: 400px) {
    .grid {
        grid: 1fr / 100px 1fr 100px auto;
        grid-template-areas: "header"
                             "main  "
                             "aside "
                             "footer"; }
}
                        

Responsive grid example

Auto repeat

auto-fill & auto-fit keywords for repeat()

Auto repeat example


<div class="grid">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
</div>
                            

Subgrids

Nested grid vs Subgrid example

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>
                            

How does it work?

Example


<div class="grid">
    <div class="title">Title</div>
    <div class="nav">Nav</div>
    <div class="main">Lorem ipsum...</div>
    <div class="aside">Ad</div>
    <div class="aside">Adword</div>
</div>
                        

.grid  { display: grid;
         width: 800px;
         grid-template-columns: 200px 1fr auto;
         grid-template-rows: 100px auto; }
.title { grid-row: 1; grid-column: 2; }
.nav   { grid-row: 2; grid-column: 1; }
.main  { grid-row: 2; grid-column: 2; }
.aside {              grid-column: 3; }
                        

Empty grid

Empty grid

Place items

Items placed in the grid

Place items

Items placed in the grid

Place items

Items placed in the grid

Place items

Items placed in the grid

Place items

Items placed in the grid

Place items

Items placed in the grid

Fixed column

Size fixed column

Intrinsic column

Size items of intrinsic column

Intrinsic column

Size intrinsic column

Flexible column

Check size of flexible column

Flexible column

Size flexible column

Layout items

Layout items

Fixed row

Size fixed row

Intrinsic row

Check inttrinsic row

Intrinsic row

Size intrinsic row

Stretch items

Stretch items

Faster grids

Fixed vs intrinsic sizing

200px is faster than auto

60% faster (20x10 grid)

100% faster (100x20 grid)

140% faster (100x100 grid)

Intrinsic vs flexible sizing

auto is faster than 1fr

40% faster

Vertical stretch

Vertical stretch in auto-sized items is slower than other (e.g. start)

Item

20% slower

Horizontal non-stretch

Avoid horizontal stretch (e.g. start) in auto-sized items is slower

Item

10% slower

Status

W3C Specification

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

Started by Microsoft in 2010

Last Working Draft 17 September 2015

W3C Test Suite

Can I use grid? 😭

Can I use grid?

Browsers adoption 😃

Old implementation since IE 10 Prefixed: -ms
More complete implementation Experimental Web Platform Features
Enabled by default on WebKit Nightlies Prefixed: -webkit
Implementation started early this year 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!