OLD | NEW |
1 .grid { | 1 .grid { |
2 display: grid; | 2 display: grid; |
3 background-color: grey; | 3 background-color: grey; |
4 } | 4 } |
5 | 5 |
6 .indefiniteSizeGrid { | 6 .indefiniteSizeGrid { |
7 display: grid; | 7 display: grid; |
8 background-color: grey; | 8 background-color: grey; |
9 width: -webkit-min-content; | 9 width: -webkit-min-content; |
10 height: auto; | 10 height: auto; |
11 } | 11 } |
12 | 12 |
13 .inline-grid { | 13 .inline-grid { |
14 display: inline-grid; | 14 display: inline-grid; |
15 background-color: grey; | 15 background-color: grey; |
16 } | 16 } |
17 | 17 |
18 .firstRowFirstColumn { | 18 .firstRowFirstColumn { |
19 background-color: blue; | 19 background-color: blue; |
20 grid-column: 1; | 20 grid-column: 1; |
21 grid-row: 1; | 21 grid-row: 1; |
22 } | 22 } |
23 | 23 |
| 24 .onlyFirstRowOnlyFirstColumn { |
| 25 background-color: blue; |
| 26 grid-column: 1 / 2; |
| 27 grid-row: 1 / 2; |
| 28 } |
| 29 |
24 .firstRowSecondColumn { | 30 .firstRowSecondColumn { |
25 background-color: lime; | 31 background-color: lime; |
26 grid-column: 2; | 32 grid-column: 2; |
27 grid-row: 1; | 33 grid-row: 1; |
28 } | 34 } |
29 | 35 |
| 36 .onlyFirstRowOnlySecondColumn { |
| 37 background-color: lime; |
| 38 grid-column: 2 / 3; |
| 39 grid-row: 1 / 2; |
| 40 } |
| 41 |
30 .secondRowFirstColumn { | 42 .secondRowFirstColumn { |
31 background-color: purple; | 43 background-color: purple; |
32 grid-column: 1; | 44 grid-column: 1; |
33 grid-row: 2; | 45 grid-row: 2; |
34 } | 46 } |
35 | 47 |
| 48 .onlySecondRowOnlyFirstColumn { |
| 49 background-color: purple; |
| 50 grid-column: 1 / 2; |
| 51 grid-row: 2 / 3; |
| 52 } |
| 53 |
36 .secondRowSecondColumn { | 54 .secondRowSecondColumn { |
37 background-color: orange; | 55 background-color: orange; |
38 grid-column: 2; | 56 grid-column: 2; |
39 grid-row: 2; | 57 grid-row: 2; |
40 } | 58 } |
41 | 59 |
| 60 .onlySecondRowOnlySecondColumn { |
| 61 background-color: orange; |
| 62 grid-column: 2 / 3; |
| 63 grid-row: 2 / 3; |
| 64 } |
| 65 |
| 66 .endSecondRowEndSecondColumn { |
| 67 background-color: orange; |
| 68 grid-column-end: 3; |
| 69 grid-row-end: 3; |
| 70 } |
| 71 |
42 .firstAutoRowSecondAutoColumn { | 72 .firstAutoRowSecondAutoColumn { |
43 grid-row: 1 / auto; | 73 grid-row: 1 / auto; |
44 grid-column: 2 / auto; | 74 grid-column: 2 / auto; |
45 } | 75 } |
46 | 76 |
47 .autoLastRowAutoLastColumn { | 77 .autoLastRowAutoLastColumn { |
48 grid-row: auto / -1; | 78 grid-row: auto / -1; |
49 grid-column: auto / -1; | 79 grid-column: auto / -1; |
50 } | 80 } |
51 | 81 |
(...skipping 141 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
193 -webkit-writing-mode: vertical-lr; | 223 -webkit-writing-mode: vertical-lr; |
194 } | 224 } |
195 | 225 |
196 .horizontalBT { | 226 .horizontalBT { |
197 -webkit-writing-mode: horizontal-bt; | 227 -webkit-writing-mode: horizontal-bt; |
198 } | 228 } |
199 | 229 |
200 .directionRTL { | 230 .directionRTL { |
201 direction: rtl; | 231 direction: rtl; |
202 } | 232 } |
OLD | NEW |