Post on 11-Apr-2017
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>
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 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/