CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)

CSS GRID LAYOUT
FROM THE INSIDE OUT
MANUEL REGO CASASNOVAS ( )@regocas
HTML5DevConf Autumn 2015 / 19-20 October 2015 (San Francisco)

ABOUT ME
CSS Grid Layout implementor (Chromium/Blink &
Safari/WebKit)
Member of Igalia Web Platform Team

GRID CONCEPTS
Header
MainAside
Footer

GRID LINES
Header
MainAside
Footer
1 2 3
1
2
3
4

GRID TRACKS
ROWS
Header
MainAside
Footer

GRID TRACKS
COLUMNS
Header
MainAside
Footer

GRID CELLS
Header
MainAside
Footer

GRID AREAS
Header
MainAside
Footer

DISPLAY: GRID;
New formatting context

TRACK SIZING
grid-template-columns& grid-template-rows
Create boxes from CSS!

TRACK SIZING EXAMPLE
A
B
C
D
.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 PROPERTIES
grid-column& grid-row
DOM order ≠ Visual order

PLACEMENT EXAMPLE
A
B
C
grid: 200px 200px / 100px 100px; }
.a { }
<div class="grid">
</div>

NAMED GRID LINES
Use custom identifiers to reference lines
A line can have several names

NAMED LINES EXAMPLE
A
B
C
grid-template-columns:
[left] 100px [middle center] 200px [right]; }
<div class="grid">
</div>

GRID AREAS
grid-template-areas
### ###### ###### #### #### ### ######## ########
## ## ## ## ## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ## ## ##
## ## ###### ## ## ## ## ## ######## ##
######### ## ## ## ## ######### ## ## ##
## ## ## ## ## ## ## ## ## ## ## ## ##
## ## ###### ###### #### #### ## ## ## ## ##

GRID AREAS EXAMPLE
A
B
C
D
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>

ALIGNMENT
specCSS Box Alignment
Horizontal & vertical centering!

ITEMS ALIGNMENT EXAMPLE
A
B
C
.grid { display: grid; grid: 200px 200px / 100px 100px;
align-items: ; justify-items: ; }
.b { align-self: ; justify-self: ; }
<div class="grid">
</div>

TRACKS ALIGNMENT EXAMPLE
A
B
C
.grid { display: grid; grid: 150px 150px / 100px 100px;
align-content: ;
justify-content: ; }
<div class="grid">
</div>

GRID GUTTERS
grid-row-gap& grid-column-gap

GRID GUTTERS EXAMPLE
A
B
C
D
E
grid: 100px 100px 100px / 100px 100px;
grid-row-gap: ; grid-column-gap: ; }
<div class="grid">
<div class="e">E</div>
</div>

AUTO-PLACEMENT EXAMPLE
Input
Checkbox Submit form
form { }
label { }
input { }
<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
Header
MainAside
Footer

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

AUTO REPEAT EXAMPLE
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 EXAMPLE
Input
Checkbox
Submit 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>

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

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
Ad
Adword
200px 130px470px
100px

INTRINSIC ROW
Title
Nav
60px
Lorem ipsum dolor sit amet,
160px
Ad
Adword
60px
200px 130px470px
100px
auto

INTRINSIC ROW
Title
Ad
Adword
200px 130px470px
100px
160px

STRETCH ITEMS
Title
Ad
Adword
200px 130px470px
100px
160px

FIXED VS INTRINSIC SIZING
200pxis faster than auto

INTRINSIC VS FLEXIBLE SIZING
autois faster than 1fr

VERTICAL STRETCH
Vertical stretchin auto-sized items is slower than other
(e.g. start)
Item

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

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

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
by Igalia
by Rachel Andrew
http://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:
@regocas
rego@igalia.com
http://blogs.igalia.com/mrego/

CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)

Recommended

More Related Content

Viewers also liked (11)

Similar to CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015) (20)

More from Igalia (20)

Recently uploaded (20)

CSS Grid Layout from the inside out (HTML5DevConf Autumn 2015)