| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
| 5 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 5 <script src="../../resources/check-layout.js"></script> | 6 <script src="../../resources/check-layout.js"></script> |
| 6 <style> | 7 <style> |
| 7 body { | 8 body { |
| 8 margin: 0px; | 9 margin: 0px; |
| 9 } | 10 } |
| 10 | 11 |
| 11 .grid { | 12 .grid { |
| 12 grid-auto-columns: 20px; | 13 grid-auto-columns: 20px; |
| 13 grid-auto-rows: 40px; | 14 grid-auto-rows: 40px; |
| 14 position: relative; | 15 position: relative; |
| 15 width: 300px; | 16 width: 300px; |
| 16 height: 200px; | 17 height: 200px; |
| 17 } | 18 } |
| 18 | 19 |
| 19 .stretchedGrid { | 20 .stretchedGrid { |
| 20 grid-auto-columns: auto; | 21 grid-auto-columns: auto; |
| 21 } | 22 } |
| 22 | 23 |
| 23 .justifyContentSpaceBetween { | |
| 24 justify-content: space-between; | |
| 25 } | |
| 26 | |
| 27 .justifyContentSpaceAround { | |
| 28 justify-content: space-around; | |
| 29 } | |
| 30 | |
| 31 .justifyContentSpaceEvenly { | |
| 32 justify-content: space-evenly; | |
| 33 } | |
| 34 | |
| 35 .justifyContentStretch { | |
| 36 justify-content: stretch; | |
| 37 } | |
| 38 | |
| 39 .firstRowThirdColumn { | 24 .firstRowThirdColumn { |
| 40 background-color: magenta; | 25 background-color: magenta; |
| 41 grid-column: 3; | 26 grid-column: 3; |
| 42 grid-row: 1; | 27 grid-row: 1; |
| 43 } | 28 } |
| 44 | 29 |
| 45 .secondRowThirdColumn { | 30 .secondRowThirdColumn { |
| 46 background-color: navy; | 31 background-color: navy; |
| 47 grid-column: 3; | 32 grid-column: 3; |
| 48 grid-row: 2; | 33 grid-row: 2; |
| (...skipping 300 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 349 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="75" data-expected-height="40"></div> | 334 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da
ta-expected-width="75" data-expected-height="40"></div> |
| 350 <div class="secondRowFirstColumn" data-offset-x="225" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> | 335 <div class="secondRowFirstColumn" data-offset-x="225" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 351 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="40
" data-expected-width="75" data-expected-height="40"></div> | 336 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="40
" data-expected-width="75" data-expected-height="40"></div> |
| 352 <div class="secondRowThirdColumn" data-offset-x="75" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> | 337 <div class="secondRowThirdColumn" data-offset-x="75" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 353 <div class="secondRowFourthColumn" data-offset-x="0" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> | 338 <div class="secondRowFourthColumn" data-offset-x="0" data-offset-y="40"
data-expected-width="75" data-expected-height="40"></div> |
| 354 </div> | 339 </div> |
| 355 </div> | 340 </div> |
| 356 | 341 |
| 357 </body> | 342 </body> |
| 358 </html> | 343 </html> |
| OLD | NEW |