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 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
62 grid-column: 2 / 3; | 62 grid-column: 2 / 3; |
63 grid-row: 2 / 3; | 63 grid-row: 2 / 3; |
64 } | 64 } |
65 | 65 |
66 .endSecondRowEndSecondColumn { | 66 .endSecondRowEndSecondColumn { |
67 background-color: orange; | 67 background-color: orange; |
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 { |
| 73 background-color: red; |
| 74 grid-column: 2; |
| 75 grid-row: 3; |
| 76 } |
| 77 |
72 .firstAutoRowSecondAutoColumn { | 78 .firstAutoRowSecondAutoColumn { |
73 grid-row: 1 / auto; | 79 grid-row: 1 / auto; |
74 grid-column: 2 / auto; | 80 grid-column: 2 / auto; |
75 } | 81 } |
76 | 82 |
77 .autoLastRowAutoLastColumn { | 83 .autoLastRowAutoLastColumn { |
78 grid-row: auto / -1; | 84 grid-row: auto / -1; |
79 grid-column: auto / -1; | 85 grid-column: auto / -1; |
80 } | 86 } |
81 | 87 |
(...skipping 87 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
169 grid-column: span 3; | 175 grid-column: span 3; |
170 grid-row: span 2; | 176 grid-row: span 2; |
171 } | 177 } |
172 | 178 |
173 .autoRowSpanning3AutoColumnSpanning2 { | 179 .autoRowSpanning3AutoColumnSpanning2 { |
174 background-color: indigo; | 180 background-color: indigo; |
175 grid-column: span 2; | 181 grid-column: span 2; |
176 grid-row: span 3; | 182 grid-row: span 3; |
177 } | 183 } |
178 | 184 |
| 185 .autoRowFirstColumnSpanning2 { |
| 186 background-color: maroon; |
| 187 grid-column: 1 / span 2; |
| 188 grid-row: auto; |
| 189 } |
| 190 |
| 191 .autoRowSecondColumnSpanning2 { |
| 192 background-color: olive; |
| 193 grid-column: 2 / span 2; |
| 194 grid-row: auto; |
| 195 } |
| 196 |
| 197 .firstRowSpanning2AutoColumn { |
| 198 background-color: maroon; |
| 199 grid-column: auto; |
| 200 grid-row: 1 / span 2; |
| 201 height: 100%; |
| 202 } |
| 203 |
| 204 .secondRowSpanning2AutoColumn { |
| 205 background-color: olive; |
| 206 grid-column: auto; |
| 207 grid-row: 2 / span 2; |
| 208 height: 100%; |
| 209 } |
| 210 |
179 /* Grid element flow. */ | 211 /* Grid element flow. */ |
180 .gridAutoFlowColumnSparse { | 212 .gridAutoFlowColumnSparse { |
181 grid-auto-flow: column; | 213 grid-auto-flow: column; |
182 } | 214 } |
183 | 215 |
184 .gridAutoFlowColumnDense { | 216 .gridAutoFlowColumnDense { |
185 grid-auto-flow: column dense; | 217 grid-auto-flow: column dense; |
186 } | 218 } |
187 | 219 |
188 .gridAutoFlowRowSparse { | 220 .gridAutoFlowRowSparse { |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
223 -webkit-writing-mode: horizontal-bt; | 255 -webkit-writing-mode: horizontal-bt; |
224 } | 256 } |
225 | 257 |
226 .directionRTL { | 258 .directionRTL { |
227 direction: rtl; | 259 direction: rtl; |
228 } | 260 } |
229 | 261 |
230 .directionLTR { | 262 .directionLTR { |
231 direction: ltr; | 263 direction: ltr; |
232 } | 264 } |
OLD | NEW |