CSS GRID LAYOUTFROM THE INSIDE OUT

MANUEL REGO CASASNOVAS ( )@regocas

HTML5DevConf Autumn 2015 / 19-20 October 2015 (San Francisco)

ABOUT MECSS Grid Layout implementor (Chromium/Blink &

Safari/WebKit)

Member of Igalia Web Platform Team

GRIDS EVERYWHERE

GRIDS EVERYWHERE

1996

EVOLUTION

<TABLE>

ὣ�

FLOAT

ὣ�

DISPLAY: INLINE-BLOCK;

ὣ�

DISPLAY: TABLE;

ὢ�

CSS FRAMEWORKS

ὠ�

DISPLAY: FLEX;

ὠ�

DISPLAY: GRID;

ὠ�

GRID CONCEPTSHeader

MainAside

Footer

GRID LINESHeader

MainAside

Footer

1 2 31

2

34

GRID TRACKS

GRID TRACKSROWS

Header

MainAside

Footer

GRID TRACKSCOLUMNS

Header

MainAside

Footer

GRID CELLSHeader

MainAside

Footer

GRID AREASHeader

MainAside

Footer

DISPLAY: GRID;New formatting context

TRACK SIZINGgrid-template-columns & grid-template-rows

Create boxes from CSS!

TRACK SIZING EXAMPLEABCD

.grid { display: grid; grid-template-columns: ; grid-template-rows: ; }

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

PLACEMENT PROPERTIESgrid-column & grid-row

DOM order ≠ Visual order

PLACEMENT EXAMPLEABC

.grid { display: grid; grid: 200px 200px / 100px 100px; }.a { }

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

NAMED GRID LINESUse custom identifiers to reference lines

A line can have several names

NAMED LINES EXAMPLEABC

.grid { display: grid; grid-template-columns: [left] 100px [middle center] 200px [right]; }

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

GRID AREASgrid-template-areas

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

GRID AREAS EXAMPLEABCD

.grid { display: grid; grid-auto-columns: 100px; grid-auto-rows: 75px; grid-template-areas: "head head" "nav main" "foot foot"; }.a { grid-area: head; }.b { grid-area: main; }.c { grid-area: nav; }.d { grid-area: foot; }

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

ALIGNMENT specCSS Box Alignment

Horizontal & vertical centering!

ITEMS ALIGNMENT EXAMPLEABC

.grid { display: grid; grid: 200px 200px / 100px 100px; align-items: ; justify-items: ; }.b { align-self: ; justify-self: ; }

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

TRACKS ALIGNMENT EXAMPLEABC

.grid { display: grid; grid: 150px 150px / 100px 100px; align-content: ; justify-content: ; }

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

GRID GUTTERSgrid-row-gap & grid-column-gap

GRID GUTTERS EXAMPLEABCDE

.grid { display: grid; grid: 100px 100px 100px / 100px 100px; grid-row-gap: ; grid-column-gap: ; }

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

AUTO-PLACEMENTgrid-auto-flow

AUTO-PLACEMENT EXAMPLEInput

Checkbox Submit form

form { }label { }input { }

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

RESPONSIVE GRIDSFlexible 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 EXAMPLEHeader

MainAside

Footer

& keywords for

AUTO REPEATauto-fill auto-fit repeat()

AUTO REPEAT EXAMPLE

.grid { display: grid; grid-template-columns: repeat(auto-fill, 100px); }

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

A B C D E

SUBGRIDS

Nested Grid

A B C

D

E

S1 Sub2

S3 Sub4

Subgrid

A B C

D

E

Sub1 Sub2

Sub3 Sub4

SUBGRIDS EXAMPLEInputCheckboxSubmit form

ul { display: grid; }li { display: grid; }label { grid-column: 1; }

<form><ul> <li><label>Input</label><input <li><label>Checkbox</label><input <li><button>Submit form</button</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

PLACE ITEMS

Title

.title { grid-row: 1; grid-colum: 2; }

PLACE ITEMS

Title

Nav

.nav { grid-row: 2; grid-colum: 1; }

PLACE ITEMS

Title

Nav Lorem ipsum...

.main { grid-row: 2; grid-colum: 2; }

PLACE ITEMS

Title

Nav Lorem ipsum...

Ad

.aside { grid-colum: 3; }

PLACE ITEMS

Title

Nav Lorem ipsum...

Ad

Adword

.aside { grid-colum: 3; }

PLACE ITEMS

Title

Nav Lorem ipsum...

Ad

Adword

FIXED COLUMN

Title

Nav Lorem ipsum...

Ad

Adword

200px

INTRINSIC COLUMN

Title

Nav Lorem ipsum...

Ad 60px

Adword 130px

200px auto

INTRINSIC COLUMN

Title

Nav Lorem ipsum...

Ad

Adword

200px 130px

FLEXIBLE COLUMN

Title

Nav Lorem ipsum...

Ad

Adword

200px 130px1fr

FLEXIBLE COLUMN

Title

Nav Lorem ipsum...

Ad

Adword

200px 130px470px

LAYOUT ITEMS

Title

Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.

Ad

Adword

200px 130px470px

FIXED ROW

Title

Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.

Ad

Adword

200px 130px470px

100px

INTRINSIC ROW

Title

Nav60px

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.

160px

Ad

Adword60px

200px 130px470px

100px

auto

INTRINSIC ROW

Title

Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.

Ad

Adword

200px 130px470px

100px

160px

STRETCH ITEMS

Title

Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.

Ad

Adword

200px 130px470px

100px

160px

FASTER GRIDS

FIXED VS INTRINSIC SIZING200px is faster than auto

INTRINSIC VS FLEXIBLE SIZINGauto is faster than 1fr

VERTICAL STRETCHVertical stretch in auto-sized items is slower than other

(e.g. start)

Item

HORIZONTAL NON-STRETCHAvoid horizontal stretch (e.g. start) in auto-sized

items is slower

Item

STATUS

W3C SPECIFICATIONCSS 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? ὢ�

BROWSERS ADOPTION ὠ�Old implementationsince IE 10

Prefixed: -ms

More completeimplementation

⚐Experimental WebPlatform Features

Enabled by default onWebKit Nightlies

Prefixed: -webkit

Implementation startedearly this year

⚐layout.css.grid.enabled

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

EXAMPLES by Igalia

by Rachel Andrewhttp://igalia.github.io/css-grid-layout/http://gridbyexample.com/

ACKNOWLEDGEMENTS

and working together to build a better webIgalia Bloomberg

© euphro https://www.flickr.com/photos/euphro/8455969860/

THANK YOU!Twitter: Mail: Blog:

@regocasrego@igalia.comhttp://blogs.igalia.com/mrego/