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; |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
68 grid-column-end: 3; | 68 grid-column-end: 3; |
69 grid-row-end: 3; | 69 grid-row-end: 3; |
70 } | 70 } |
71 | 71 |
72 .thirdRowSecondColumn { | 72 .thirdRowSecondColumn { |
73 background-color: red; | 73 background-color: red; |
74 grid-column: 2; | 74 grid-column: 2; |
75 grid-row: 3; | 75 grid-row: 3; |
76 } | 76 } |
77 | 77 |
| 78 .firstRowThirdColumn { |
| 79 background-color: magenta; |
| 80 grid-column: 3; |
| 81 grid-row: 1; |
| 82 } |
| 83 |
| 84 .secondRowThirdColumn { |
| 85 background-color: navy; |
| 86 grid-column: 3; |
| 87 grid-row: 2; |
| 88 } |
| 89 |
| 90 .firstRowFourthColumn { |
| 91 background-color: green; |
| 92 grid-column: 4; |
| 93 grid-row: 1; |
| 94 } |
| 95 |
| 96 .secondRowFourthColumn { |
| 97 background-color: pink; |
| 98 grid-column: 4; |
| 99 grid-row: 2; |
| 100 } |
| 101 |
78 .firstAutoRowSecondAutoColumn { | 102 .firstAutoRowSecondAutoColumn { |
79 grid-row: 1 / auto; | 103 grid-row: 1 / auto; |
80 grid-column: 2 / auto; | 104 grid-column: 2 / auto; |
81 } | 105 } |
82 | 106 |
83 .autoLastRowAutoLastColumn { | 107 .autoLastRowAutoLastColumn { |
84 grid-row: auto / -1; | 108 grid-row: auto / -1; |
85 grid-column: auto / -1; | 109 grid-column: auto / -1; |
86 } | 110 } |
87 | 111 |
(...skipping 167 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
255 -webkit-writing-mode: horizontal-bt; | 279 -webkit-writing-mode: horizontal-bt; |
256 } | 280 } |
257 | 281 |
258 .directionRTL { | 282 .directionRTL { |
259 direction: rtl; | 283 direction: rtl; |
260 } | 284 } |
261 | 285 |
262 .directionLTR { | 286 .directionLTR { |
263 direction: ltr; | 287 direction: ltr; |
264 } | 288 } |
OLD | NEW |