[left]
[main-start]
[center]
[main-end]
[right]
[top]
[title-start]
[title-end]
[main-start]
[main-end]
[center]
[bottom]
1
2
3
4
5
6
7
8
9
-8
-7
-6
-5
-4
-3
-2
-1
1
2
3
4
5
6
-7
-6
-5
-4
-3
-2
-1
grid-column: -8;
grid-row: -7;
grid-column: -1 / span 2;
grid-row: span 2 / 1;
grid-column: span 2 / center;
grid-row: auto / 1;
grid-column: 1 / -1; grid-row: title;
grid-area: main;
grid-column:
5 / span right;
grid-row:
auto / center;
grid-column: span bar / 9;
grid-row: center;
grid-column:
span 2 / 2;
grid-row: -2;
grid-column:
center / right;
grid-row: 5 / 4;
grid-column: center;
grid-row: bottom / span bottom;