Grids All The Way Down @rachelandrew at Codegarden Slides & resources https://noti.st/rachelandrew
Slide 1
Slide 2
Doing things on the web since 1996 Co-founder Perch CMS & Notist. Editor in Chief Smashing Magazine. Writer of many books. CSS Working Group Member representing Fronteers. Spec editor Multicol and Page Floats. MDN tech writer. Slides & resources https://noti.st/rachelandrew
Slide 3
CSS Grid Layout Two years on. Slides & resources https://noti.st/rachelandrew
Slide 4
“I can make flexbox do anything. Why should I learn grid?” Slides & resources https://noti.st/rachelandrew
Slide 5
“Should I use colour in this web design, or will fonts do?” Slides & resources https://noti.st/rachelandrew
Slide 6
“Should I build my site using Flexbox or Grid?” Slides & resources https://noti.st/rachelandrew
Slide 7
Stop thinking about Flexbox & Grid as two separate layout methods Slides & resources https://noti.st/rachelandrew
Slide 8
Should I build my site using Flexbox or Grid? YES. Slides & resources https://noti.st/rachelandrew
Slide 9
Slides & resources https://noti.st/rachelandrew
Slide 10
Look at the pattern you need to build. That will tell you which layout method you need. Slides & resources https://noti.st/rachelandrew
Slide 11
Flexbox when you have a bunch of different size stuff you want displayed in a readable way. Slides & resources https://noti.st/rachelandrew
Slide 12
Slides & resources https://noti.st/rachelandrew
Slide 13
Grid for when you want to control the structure and place items into it. Slides & resources https://noti.st/rachelandrew
Slide 14
Slides & resources https://noti.st/rachelandrew
Slide 15
If you are putting widths on all your flex items to make them line up. You probably want grid. Slides & resources https://noti.st/rachelandrew
Slide 16
Slides & resources https://noti.st/rachelandrew
Slide 17
Slides & resources https://noti.st/rachelandrew
Slide 18
/* flex / .airplanes { display: flex; flex-wrap: wrap; } .airplanes li { flex: 1 1 400px; height: 45vh; margin: 2vh 10px; } / grid */ .airplanes { display: grid; grid-gap: 5vh; grid-template-columns: repeat(auto-fill, minmax(400px, auto)); grid-auto-rows: 45vh; } Slides & resources https://noti.st/rachelandrew
Slide 19
Slides & resources https://noti.st/rachelandrew
Slide 20
Two-dimensional Grid works in the same way in both axes. Slides & resources https://noti.st/rachelandrew
Slide 21
Inline dimension: the grid fills the grid container Block dimension: as tall as is needed for the content. Slides & resources https://noti.st/rachelandrew
Slide 22
Inline dimension: the grid fills the grid container Block dimension: the grid fills the grid container Slides & resources https://noti.st/rachelandrew
Slide 23
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,100px); gap: 5px; } Slides & resources https://noti.st/rachelandrew
Slide 24
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3,100px); gap: 5px; } Slides & resources https://noti.st/rachelandrew
Slide 25
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(100px,auto)); } gap: 5px; Slides & resources https://noti.st/rachelandrew
Slide 26
We have choices now! Enjoy them, they have been a long time coming. Slides & resources https://noti.st/rachelandrew
Slide 27
Slides & resources https://noti.st/rachelandrew
Slide 28
Slides & resources https://noti.st/rachelandrew
Slide 29
Slides & resources https://noti.st/rachelandrew
Slide 30
What can’t we do yet? Slides & resources https://noti.st/rachelandrew
Slide 31
Slides & resources https://noti.st/rachelandrew
Slide 32
figure { display: grid; height: 100%; grid-template-columns: 1fr 3fr; grid-template-rows: 1fr minmax(1em, auto); } Slides & resources https://noti.st/rachelandrew
Slide 33
Only direct children become grid or flex items. Their children return to normal flow. Slides & resources https://noti.st/rachelandrew
Slide 34
Slides & resources https://noti.st/rachelandrew
Slide 35
Slides & resources https://noti.st/rachelandrew
Slide 36
Slides & resources https://noti.st/rachelandrew
Slide 37
1 2 3 4 Slides & resources https://noti.st/rachelandrew
Slide 38
display: contents Removing the box from the layout. Slides & resources https://noti.st/rachelandrew
Slide 39
Slides & resources https://noti.st/rachelandrew
Slide 40
<!—HTML—> <div class=”grid”> <div>Direct Child</div> <div>Direct Child</div> <ul> <li>List Item</li> <li>List Item</li> <li>List Item</li> </ul> <div>Direct Child</div> </div>
Slides & resources https://noti.st/rachelandrew
Slide 41
/* CSS */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .grid > * { background-color: rgba(255,255,255,.5); } ul > * { background-color: rgb(209,54,114); } ul { } Slides & resources https://noti.st/rachelandrew
Slide 42
/* CSS */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); } .grid > * { background-color: rgba(255,255,255,.5); } ul > * { background-color: rgb(209,54,114); } ul { } display: contents; Slides & resources https://noti.st/rachelandrew
Slide 43
Slides & resources https://noti.st/rachelandrew
Slide 44
Subgrid Create a grid on a grid item which uses the grid tracks defined on the parent – for rows, columns or both. Slides & resources https://noti.st/rachelandrew
Slide 45
.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 80px); } .subitem { grid-column: 2 / 4; grid-row: 1 / 4; } Slides & resources https://noti.st/rachelandrew
Slide 46
Slides & resources https://noti.st/rachelandrew
Slide 47
Slides & resources https://noti.st/rachelandrew
Slide 48
Slides & resources https://noti.st/rachelandrew
Slide 49
.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(3, 80px); } .subitem { grid-column: 3 / 6; grid-row: 1 / 4; } Slides & resources https://noti.st/rachelandrew
Slide 50
.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew
Slide 51
.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 3 / 6; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew
Slide 52
Line numbers start from 1 inside the subgrid. You position child items in the subgrid according to the subgrid line numbering, not those of the parent. Slides & resources https://noti.st/rachelandrew
Slide 53
Slides & resources https://noti.st/rachelandrew
Slide 54
Line names on the parent are passed into the subgrid. If you have named lines on the parent grid they will be passed into the subgrid and added to any names defined there. Slides & resources https://noti.st/rachelandrew
Slide 55
col-start col-end col-start col-end Slides & resources https://noti.st/rachelandrew
Slide 56
.grid { display: grid; grid-template-columns:1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr; grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: col-start / col-end; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew
Slide 57
You can add named lines to the subgrid. Line names are added after the subgrid keyword. Slides & resources https://noti.st/rachelandrew
Slide 58
col-end col-start sub-b sub-d Slides & resources https://noti.st/rachelandrew
Slide 59
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr [col-start] 1fr 1fr 1fr [col-end] 1fr 1fr 1fr; grid-template-rows: repeat(4, minmax(100px, auto)); } .item { grid-column: 2 / 7; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e] [sub-f]; grid-template-rows: subgrid; } .subitem { grid-column: col-start / col-end; grid-row: 1 / 3; } .subitem { grid-column: sub-b / sub-d; grid-row: 1 / 3; } Slides & resources https://noti.st/rachelandrew
Slide 60
The subgrid inherits the gaps from the parent. Slides & resources https://noti.st/rachelandrew
Slide 61
Slides & resources https://noti.st/rachelandrew
Slide 62
You can change the gaps on the subgrid. Slides & resources https://noti.st/rachelandrew
Slide 63
Slides & resources https://noti.st/rachelandrew
Slide 64
Sizing of items in the subgrid can change the size of the parent tracks. Slides & resources https://noti.st/rachelandrew
Slide 65
Slides & resources https://noti.st/rachelandrew
Slide 66
Solved by subgrid … Slides & resources https://noti.st/rachelandrew
Slide 67
Slides & resources https://noti.st/rachelandrew
Slide 68
.wrapper { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); /* 5 explicit rows */ grid-template-rows: repeat(5, minmax(100px, auto)); } .fullheight { background-color: rgb(209,54,114); grid-row: 1 / -1; } Slides & resources https://noti.st/rachelandrew
Slide 69
Line -1 is the end line of the explicit grid. Slides & resources https://noti.st/rachelandrew
Slide 70
Slides & resources https://noti.st/rachelandrew
Slide 71
.wrapper { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); /* no defined explicit rows */ grid-auto-rows: minmax(100px, auto); } .fullheight { background-color: rgb(209,54,114); grid-row: 1 / -1; } Slides & resources https://noti.st/rachelandrew
Slide 72
We can’t target the end line of the implicit grid. Slides & resources https://noti.st/rachelandrew
Slide 73
Place the items in a container which uses a subgrid for columns Slides & resources https://noti.st/rachelandrew
Slide 74
Slides & resources https://noti.st/rachelandrew
Slide 75
.wrapper { display: grid; gap: 10px; grid-template-columns: repeat(5, 1fr); /* no defined explicit rows */ grid-auto-rows: minmax(100px, auto); } .items { grid-column: 2 / -1; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(100px, auto); } .fullheight { background-color: rgb(209,54,114); grid-row: 1 / -1; } Slides & resources https://noti.st/rachelandrew
Slide 76
Now the bad news There are currently no browser implementations of subgrid. Slides & resources https://noti.st/rachelandrew
Slide 77
Slides & resources https://noti.st/rachelandrew
Slide 78
Slightly better news Firefox are implementing subgrid as we speak! Slides & resources https://noti.st/rachelandrew
Slide 79
Fewer rendering engines fewer places where new ground can be broken. Slides & resources https://noti.st/rachelandrew
Slide 80
Tell browsers what you want in the platform. Slides & resources https://noti.st/rachelandrew
Slide 81
Slides & resources https://noti.st/rachelandrew
Slide 82
https://bugs.chromium.org/p/chromium/issues/detail?id=618969 Slides & resources https://noti.st/rachelandrew
Slide 83
Slides & resources https://noti.st/rachelandrew
Slide 84
https://bugzilla.mozilla.org/show_bug.cgi?id=1240834 Slides & resources https://noti.st/rachelandrew
Slide 85
Slides & resources https://noti.st/rachelandrew
Slide 86
https://wpdev.uservoice.com/forums/257854-microsoft-edgedeveloper/suggestions/20447239-implement-subgrid Slides & resources https://noti.st/rachelandrew
Slide 87
Write about features you want to see in browsers Write up your use cases, the problems having the feature will solve. Slides & resources https://noti.st/rachelandrew
Slide 88
Use new features Browsers are watching. Slides & resources https://noti.st/rachelandrew
Slide 89
Slides & resources https://noti.st/rachelandrew
Slide 90
Use new features when they are behind a flag You get to beta test the web platform! Slides & resources https://noti.st/rachelandrew
Slide 91
Give feedback to the CSS Working Group https://github.com/w3c/csswg-drafts/issues Slides & resources https://noti.st/rachelandrew
Slide 92
Slides & resources https://noti.st/rachelandrew
Slide 93
Participate in the web platform Or you are leaving your future as a designer or developer in the hands of the very few who do. Slides & resources https://noti.st/rachelandrew
Slide 94
Thank you @rachelandrew Slides & resources https://noti.st/rachelandrew
