By Manuel Rego. Slides at http://people.igalia.com/mrego/talks/html5devconf-2015-css-grid-layout/#/ Layout on the web has been missing a proper solution for creating grid designs since the beginning. But this dark period is coming to an end with the new CSS Grid Layout spec. Grid layout is being implemented in every major web engine. The good news is that it will be hitting your browsers very soon. During this talk we will not only review its syntax and main features, but also explain the internal details about what the browser has to do to render a CSS grid. After the talk, you'll be able to start playing with CSS Grid Layout, understanding the underlying steps involved, and provide feedback to the spec editors and browser implementors.

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

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

4. GRIDS EVERYWHERE

5. 1996

6. EVOLUTION

7. <TABLE>
ὤ

8. FLOAT
ὣ

9. DISPLAY: INLINE-BLOCK;
ὣ

10. DISPLAY: TABLE;
ὢ

11. CSS FRAMEWORKS
ὠ

12. DISPLAY: FLEX;
ὠ

13. DISPLAY: GRID;
ὠ

15. GRID CONCEPTS
Header
MainAside
Footer

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

17. GRID TRACKS

18. GRID TRACKS
ROWS
Header
MainAside
Footer

19. GRID TRACKS
COLUMNS
Header
MainAside
Footer

20. GRID CELLS
Header
MainAside
Footer

21. GRID AREAS
Header
MainAside
Footer

23. DISPLAY: GRID;
New formatting context

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

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

26. PLACEMENT PROPERTIES
grid-column& grid-row
DOM order ≠ Visual order

27. PLACEMENT EXAMPLE
A
B
C
.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>

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

29. NAMED LINES EXAMPLE
A
B
C
.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>

30. GRID AREAS
grid-template-areas
### ###### ###### #### #### ### ######## ########
## ## ## ## ## ## ## ## ## ## ## ## ##
## ## ## ## ## ## ## ## ## ## ##
## ## ###### ## ## ## ## ## ######## ##
######### ## ## ## ## ######### ## ## ##
## ## ## ## ## ## ## ## ## ## ## ## ##
## ## ###### ###### #### #### ## ## ## ## ##

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

32. ALIGNMENT
specCSS Box Alignment
Horizontal & vertical centering!

33. 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 class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>

34. TRACKS ALIGNMENT EXAMPLE
A
B
C
.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>

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

36. GRID GUTTERS EXAMPLE
A
B
C
D
E
.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>

37. AUTO-PLACEMENT
grid-auto-flow

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

39. RESPONSIVE GRIDS
Flexible track sizing
Media Queries

40. 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"; }
}

41. RESPONSIVE GRID EXAMPLE
Header
MainAside
Footer

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

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

45. SUBGRIDS
Nested Grid
A B C
D
E
S1 Sub2
S3 Sub4
Subgrid
A B C
D
E
Sub1 Sub2
Sub3 Sub4

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

47. HOW DOES IT WORK?

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

49. EMPTY GRID

50. PLACE ITEMS
Title
.title { grid-row: 1; grid-colum: 2; }

51. PLACE ITEMS
Title
Nav
.nav { grid-row: 2; grid-colum: 1; }

52. PLACE ITEMS
Title
Nav Lorem ipsum...
.main { grid-row: 2; grid-colum: 2; }

53. PLACE ITEMS
Title
Nav Lorem ipsum...
Ad
.aside { grid-colum: 3; }

54. PLACE ITEMS
Title
Nav Lorem ipsum...
Ad
Adword
.aside { grid-colum: 3; }

55. PLACE ITEMS
Title
Nav Lorem ipsum...
Ad
Adword

56. FIXED COLUMN
Title
Nav Lorem ipsum...
Ad
Adword
200px

57. INTRINSIC COLUMN
Title
Nav Lorem ipsum...
Ad 60px
Adword 130px
200px auto

58. INTRINSIC COLUMN
Title
Nav Lorem ipsum...
Ad
Adword
200px 130px

59. FLEXIBLE COLUMN
Title
Nav Lorem ipsum...
Ad
Adword
200px 130px1fr

60. FLEXIBLE COLUMN
Title
Nav Lorem ipsum...
Ad
Adword
200px 130px470px

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

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

63. INTRINSIC ROW
Title
Nav
60px
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do iusmod tempor incididunt
ut labore et dolore magna aliqua.
160px
Ad
Adword
60px
200px 130px470px
100px
auto

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

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

66. FASTER GRIDS

67. FIXED VS INTRINSIC SIZING
200pxis faster than auto

68. INTRINSIC VS FLEXIBLE SIZING
autois faster than 1fr

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

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

71. STATUS

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

73. CAN I USE GRID? ὢ

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

75. EXAMPLES
by Igalia
by Rachel Andrew
http://igalia.github.io/css-grid-layout/
http://gridbyexample.com/

76. ACKNOWLEDGEMENTS
and working together to build a better webIgalia Bloomberg

77. © euphro https://www.flickr.com/photos/euphro/8455969860/
THANK YOU!
Twitter:
Mail:
Blog:
@regocas
rego@igalia.com
http://blogs.igalia.com/mrego/