#container {
display: grid;
grid-template-columns: [v0] 1rem [v1] 1rem [v2] 1rem [v3];
grid-template-rows: [h0] 1rem [h1] 1rem [h2];
}
Lines Can Be Named
[h0]
[h1]
[h2]
[v0] [v1] [v2] [v3]
Slide 17
Slide 17 text
#container {
display: grid;
grid-template-columns: [v0] 1rem [v1] 1rem [v2] 1rem [v3];
grid-template-rows: [h0] 1rem [h1] 1rem [h2];
grid-template-areas: "top top top"
"left . right";
}
Areas Can Be Named, Too
top
left right
Slide 18
Slide 18 text
#container {
display: grid;
grid: [r0-start] "top top top" 1rem [r0-end]
[r1-start] "left . right" 1rem [r1-end];
}
Typing Sucks…
top
left right
[r0-start]
[r0-end] [r1-start]
[r1-end]
Slide 19
Slide 19 text
Arranging Items on a Grid
Slide 20
Slide 20 text
#container {…}
#container header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
Arranging Items Between Lines
index starts at 1