A walkthrough of the CSS Grid Layout Module Specification as of April 2016

1. THE GRID
The future of CSS layout

2. Evolution of web layout

3. <table>

4. float

5. display: inline-block

6. display: table

7. position: absolute

8. CSS Frameworks

9. display: flex

10. Cost of taming layout
• Hours spent learning non-obvious concepts
• Sacrifice semantics in order to do responsive layout
• Rely on frameworks to work out the numbers
• Extra markup to create grids
• Abstract layout hack with preprocessors (mixins etc.)

11. display: grid

12. CSS Grid layout
A system
designed for handling «2 dimentional» layout

13. Browser support

14. In-development. Unprefixed support with flag enabled
In-development. Some features supported unprefixed in nightlies
-webkit prefix supported in Webkit Nightlies
IE10 support old syntax with –ms prefix
Is on Edge backlog, marked as High Priority

15. The basics

16. Basic HTML structure <div class="grid grid--1">
<div class="grid__item grid__item--1">1</div>
<div class="grid__item grid__item--2">2</div>
</div>

17. Establish grid context to parent using
display: grid
.grid {
display: grid;
}

18. Describe grid using properties:
grid-template-columns
grid-template-rows
.grid--1 {
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto auto;
}

19. Position items (children) using:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
A
.grid__item--1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}

20. Position item bottom center
B
.grid__item--2 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}

21. Span an item over more tracks by changing
column-end/ row-end
B
.grid__item--2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}

22. Long hand Short hand
.grid__item--1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.grid__item--2 {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.grid__item--1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.grid__item--2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}

23. Even shorter: grid-area
.grid__item--1 {
grid-area: 1 / 1 / 2 / 2;
}
.grid__item--2 {
grid-area: 2 / 2 / 3 / 4;
}
A
B

24. Terminology

25. Grid CONTAINER
• The element on which display:
grid is applied.
• It's the direct parent of all the
grid items.

26. Grid ITEM
• The children (e.g. direct
descendants) of the grid
container.

27. Grid LINES
• Line either horizontal or vertical
• Referred to by number
• Can be named
Column Line 2

28. Grid CELL
• Smallest unit in a grid
• The space between four grid
lines
• «table-cell»
Cell between:
- Row Line 2 and 3,
- Column Line 2 and 3

29. Grid TRACK
• The space between two Grid
Lines
• Tracks can be horizontal or
vertical (rows or columns)
Track between:
- Row Line 2 and 3

30. Grid AREA
• Any area of the Grid bound by
4 Grid Lines
• Can contain many Grid Cells
Area between:
- Row Line 1 and 3,
- Column Line 1 and 3

31. Movin’ on

32. The fr unit
• A fraction is a part of the available space in a Track
• Essentially a part of whats left after space is subtracted
• Acts similar as flex-grow in Flexbox

33. Creating three column tracks.
Using 1fr in width
We get three equally sized columns
1fr 1fr 1fr
<!-- HTML -->
<div class="grid grid--2">
<div class="grid__item grid__item--1"></div>
<div class="grid__item grid__item--2"></div>
<div class="grid__item grid__item--3"></div>
<div class="grid__item grid__item--4"></div>
<div class="grid__item grid__item--5"></div>
<div class="grid__item grid__item--6"></div>
</div>
// SCSS
.grid--2 {
grid-template-columns: 1fr 1fr 1fr;
}

34. First column = 600px
2 x 1fr columns
After 600px is subtracted, the rest is equally
devided between the two fr-columns
600px 1fr 1fr
<!-- HTML -->
<div class="grid grid--2">
<div class="grid__item grid__item--1"></div>
<div class="grid__item grid__item--2"></div>
<div class="grid__item grid__item--3"></div>
<div class="grid__item grid__item--4"></div>
<div class="grid__item grid__item--5"></div>
<div class="grid__item grid__item--6"></div>
</div>
// SCSS
.grid--2 {
grid-template-columns: 600px 1fr 1fr;
}

35. First column = 600px
1 x 1fr column
1 x 3fr column
After 600px is subtracted, the rest is
devided by 4
1fr = 25%
3fr = 75%
600px 3fr
<!-- HTML -->
<div class="grid grid--2">
<div class="grid__item grid__item--1"></div>
<div class="grid__item grid__item--2"></div>
<div class="grid__item grid__item--3"></div>
<div class="grid__item grid__item--4"></div>
<div class="grid__item grid__item--5"></div>
<div class="grid__item grid__item--6"></div>
</div>
// SCSS
.grid--2 {
grid-template-columns: 600px 1fr 3fr;
}
1fr

36. <!-- HTML -->
<div class="grid grid--grail">
<header class="grid__item header">Header</header>
<article class="grid__item content">Content</article>
<div class="grid__item sidebar1">Sidebar 1</div>
<div class="grid__item sidebar2">Sidebar 2</div>
<footer class="grid__item footer">Footer</footer>
</div>
// SCSS
.grid--grail {
grid-template-columns: 300px 1fr 300px;
grid-template-rows: auto;
grid-column-gap: 20px;
.header { grid-column: 1 / 4; }
.content { grid-column: 2 / 3; grid-row: 2 / 3; }
.sidebar1 { grid-column: 1 / 2; grid-row: 2 / 3; }
.sidebar2 { grid-column: 3 / 4; grid-row: 2 / 3; }
.footer { grid-column: 1 / 4; grid-row: 3 / 4; }
}
«Holy Grail» using CSS Grid
grid-gap = shorthand for
grid-column-gap + grid-row-gap

37. Holy Grail
300px
Footer
Header
1fr (fluid) 300px
// SCSS
.grid--grail {
grid-template-columns: 300px 1fr 300px;
grid-template-rows: auto;
grid-column-gap: 20px;
.header { grid-column: 1 / 4; }
.content { grid-column: 2 / 3; grid-row: 2 / 3; }
.sidebar1 { grid-column: 1 / 2; grid-row: 2 / 3; }
.sidebar2 { grid-column: 3 / 4; grid-row: 2 / 3; }
.footer { grid-column: 1 / 4; grid-row: 3 / 4; }
}

38. Explicit or implicit Grid Lines
• Explicit lines are specified using grid-template-rows or grid-
template-columns
• Implicit lines are created when you place elements into a row or
column track OUTSIDE of the explicit grid
• Default behaviour = auto sized
• You can specify a size with the grid-auto-columns and grid-
auto-rows properties

39. .grid--4 {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
}60 60
90
90

40. 1 2
.grid--4 {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
}60 60
90
90
.grid__item--1 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.grid__item--2 {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
0 0 auto

41. 1 2
60 60
90
90
.grid--4 {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
grid-auto-columns: 60px;
}
.grid__item--1 {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.grid__item--2 {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
60 60 auto

42. Auto-flow
• If you have items not placed in an explicit grid - > auto-flow
• Row: fill each row in turn, then add more rows
• Column: fill each column in turn, then add more columns
• Dense: try to fill holes earlier in the grid (might change order)
.grid--5 {
grid-auto-flow: row | column | row dense | column dense;
}

43. Auto-flow
.grid--5 {
grid-auto-flow: row;
}
1
2
6
3 4
5
Row: fill each row in
turn, then add more
rows

44. Auto-flow
.grid--5 {
grid-auto-flow: column;
}
1
2
3
4
6
5
Column: fill each
column in turn, then
add more columns

45. Grid is kinda like <table>
• But does not rely on content source order
• Semantic
• Can move items around with breakpoints
Grid item placement and reordering must not be used as a substitute for
correct source ordering, as that can ruin the accessibility of the document.

46. Alignment

47. justify-items
.grid--6 {
justify-items: start;
}

48. justify-items
.grid--6 {
justify-items: end;
}

49. justify-items
.grid--6 {
justify-items: center;
}

50. justify-items
.grid--6 {
justify-items: stretch;
}

51. align-items
.grid--6 {
align-items: start;
}

52. align-items
.grid--6 {
align-items: end;
}

53. align-items
.grid--6 {
align-items: center;
}

54. align-items
.grid--6 {
align-items: stretch;
}

55. justify-content
.grid--6 {
justify-content: start;
}

56. justify-content
.grid--6 {
justify-content: end;
}

57. justify-content
.grid--6 {
justify-content: center;
}

58. justify-content
.grid--6 {
justify-content: stretch;
}

59. justify-content
.grid--6 {
justify-content: space-around;
}

60. justify-content
.grid--6 {
justify-content: space-between;
}

61. justify-content
.grid--6 {
justify-content: space-evenly;
}

62. align-content
.grid--6 {
align-content: start;
}

63. align-content
.grid--6 {
align-content: end;
}

64. align-content
.grid--6 {
align-content: center;
}

65. align-content
.grid--6 {
align-content: stretch;
}

66. align-content
.grid--6 {
align-content: space-around;
}

67. align-content
.grid--6 {
align-content: space-between;
}

68. align-content
.grid--6 {
align-content: space-evenly;
}

69. Naming things

70. As we remember…
.grid__item--1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.grid__item--1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.grid__item--1 {
grid-area: 1 / 1 / 3 / 2;
}
A

71. Spanning cells
.grid__item--1 {
grid-column: 1 / 3;
grid-row: 1; // defaults to span 1
}
A

72. Span keyword
.grid__item--1 {
grid-column: 1 / span 2;
grid-row: 1;
}
A

73. Named lines
.grid__item--1 {
grid-column: col1-start / col3-start;
grid-row: row1-start;
}
A
.grid--5 {
grid-template-columns: [col1-start] 100px
[col2-start] 100px
[col3-start] 100px
[col3-end];
grid-template-rows: [row1-start] auto
[row2-start] auto
[row2-end];
}

74. Named lines with span
.grid__item--1 {
grid-column: col / span 2;
grid-row: row;
}
A
.grid--5 {
grid-template-columns: [col] 100px
[col] 100px
[col] 100px
[col];
grid-template-rows: [row] auto
[row] auto
[row];
}

75. Repeat keyword
.grid__item--1 {
grid-column: col / span 2;
grid-row: row;
}
A
.grid--5 {
grid-template-columns: repeat(3, [col] 100px);
grid-template-rows: repeat(2, [row] auto);
}

76. Defining Grid Areas
Header
Sidebar Content
// SCSS
.grid--5 {
grid-template-columns: 120px 120px 120px;
grid-template-areas:
"....... header header"
"sidebar content content";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
<!-- HTML -->
<div class="grid grid--5">
<div class="grid__item header">Header</div>
<div class="grid__item sidebar">Sidebar</div>
<div class="grid__item content">Content</div>
</div>

77. Grids within grids

78. Nested grid
<!-- HTML -->
<div class="grid grid--8">
<div class="grid__item grid__item--1">1</div>
<div class="grid__item grid__item--2">2</div>
<div class="grid__item grid__item--3">3</div>
<div class="grid__item grid__item--4">
<div class="grid__item grid__item--5">5</div>
<div class="grid__item grid__item--6">6</div>
<div class="grid__item grid__item--7">7</div>
</div>
</div>
1 2
3
5
6
7

79. Nested grid
// SCSS
.grid--8 {
grid-gap: 10px;
grid-template-columns:
repeat(4, [col] 150px);
repeat(4, [row] auto);
}
1 2
3
5
6
7
.grid-item--1 {
grid-column: col / span 2; grid-row: row;
}
.grid-item--2 {
grid-column: col 3 / span 2; grid-row: row;
}
.grid-item--3 {
grid-column: col / span 2; grid-row: row 2;
}
.grid-item--4 {
grid-column: col 3 / span 2; grid-row: row 2;
}

80. .grid-item--4 {
grid-column: col 3 / span 2; grid-row: row 2;
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
.grid-item--5 {
grid-column: 1 / 3; grid-row: 1;
}
.grid-item--6 {
grid-column: 1; grid-row: 2;
}
.grid-item--7 {
grid-column: 2; grid-row: 2;
}
Nested grid
1 2
3
5
6 7

81. .grid-item--4 {
grid-column: col 3 / span 2; grid-row: row 2;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}
Subgrid
1 2
3
5
6 7

82. Subgrid
“The following feature are at-risk, and may be dropped during the CR period:
the subgrid value of grid-template-columns and grid-template-rows, and it’s
component parts individually”

83. Resources
• http://gridbyexample.com/
• https://www.youtube.com/watch?v=GRexIOtGhBU
• http://www.slideshare.net/rachelandrew/css-grid-layout-for-topconf-linz
• http://www.thedotpost.com/2015/12/rachel-andrew-the-new-css-layout
• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://hacks.mozilla.org/2015/09/the-future-of-layout-with-css-grid-layouts/
• http://igalia.github.io/css-grid-layout/index.html
• https://github.com/FremyCompany/css-grid-polyfill
• https://medium.com/@patrickbrosset/css-grid-layout-6c9cba6e8a5a#.ls5y5g53h

84. Thank You