| 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 |