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 |