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 <style> | 5 <style> |
6 .gridWithFixed { | 6 .gridWithFixed { |
7 grid-definition-columns: 7px 11px; | 7 grid-template-columns: 7px 11px; |
8 grid-definition-rows: 17px 2px; | 8 grid-template-rows: 17px 2px; |
9 } | 9 } |
10 | 10 |
11 .gridWithPercent { | 11 .gridWithPercent { |
12 grid-definition-columns: 53% 99%; | 12 grid-template-columns: 53% 99%; |
13 grid-definition-rows: 27% 52%; | 13 grid-template-rows: 27% 52%; |
14 } | 14 } |
15 .gridWithAuto { | 15 .gridWithAuto { |
16 grid-definition-columns: auto auto; | 16 grid-template-columns: auto auto; |
17 grid-definition-rows: auto auto; | 17 grid-template-rows: auto auto; |
18 } | 18 } |
19 .gridWithEM { | 19 .gridWithEM { |
20 grid-definition-columns: 10em 12em; | 20 grid-template-columns: 10em 12em; |
21 grid-definition-rows: 15em 17em; | 21 grid-template-rows: 15em 17em; |
22 font: 10px Ahem; | 22 font: 10px Ahem; |
23 } | 23 } |
24 .gridWithNoneAndAuto { | 24 .gridWithNoneAndAuto { |
25 grid-definition-columns: none auto; | 25 grid-template-columns: none auto; |
26 grid-definition-rows: none auto; | 26 grid-template-rows: none auto; |
27 } | 27 } |
28 .gridNoneWithAndFixed { | 28 .gridNoneWithAndFixed { |
29 grid-definition-columns: none 15px; | 29 grid-template-columns: none 15px; |
30 grid-definition-rows: none 22px; | 30 grid-template-rows: none 22px; |
31 } | 31 } |
32 .gridWithThreeItems { | 32 .gridWithThreeItems { |
33 grid-definition-columns: 15px auto 10em; | 33 grid-template-columns: 15px auto 10em; |
34 grid-definition-rows: 12em 18px auto; | 34 grid-template-rows: 12em 18px auto; |
35 font: 10px Ahem; | 35 font: 10px Ahem; |
36 } | 36 } |
37 .gridWithPercentAndViewportPercent { | 37 .gridWithPercentAndViewportPercent { |
38 grid-definition-columns: 50% 15vw; | 38 grid-template-columns: 50% 15vw; |
39 grid-definition-rows: 35% 28vh; | 39 grid-template-rows: 35% 28vh; |
40 } | 40 } |
41 .gridWithFitContentAndFitAvailable { | 41 .gridWithFitContentAndFitAvailable { |
42 grid-definition-columns: -webkit-content-available; | 42 grid-template-columns: -webkit-content-available; |
43 grid-definition-rows: -webkit-fit-content -webkit-fit-available; | 43 grid-template-rows: -webkit-fit-content -webkit-fit-available; |
44 } | 44 } |
45 .gridWithMinMaxContent { | 45 .gridWithMinMaxContent { |
46 grid-definition-columns: min-content max-content; | 46 grid-template-columns: min-content max-content; |
47 grid-definition-rows: max-content min-content; | 47 grid-template-rows: max-content min-content; |
48 } | 48 } |
49 .gridWithMinMaxAndFixed { | 49 .gridWithMinMaxAndFixed { |
50 grid-definition-columns: minmax(45px, 30%) 15px; | 50 grid-template-columns: minmax(45px, 30%) 15px; |
51 grid-definition-rows: 12em minmax(35%, 10px); | 51 grid-template-rows: 12em minmax(35%, 10px); |
52 font: 10px Ahem; | 52 font: 10px Ahem; |
53 } | 53 } |
54 .gridWithMinMaxAndMinMaxContent { | 54 .gridWithMinMaxAndMinMaxContent { |
55 grid-definition-columns: minmax(min-content, 30%) 15px; | 55 grid-template-columns: minmax(min-content, 30%) 15px; |
56 grid-definition-rows: 12em minmax(35%, max-content); | 56 grid-template-rows: 12em minmax(35%, max-content); |
57 font: 10px Ahem; | 57 font: 10px Ahem; |
58 } | 58 } |
59 .gridWithFractionFraction { | 59 .gridWithFractionFraction { |
60 grid-definition-columns: 1fr 2fr; | 60 grid-template-columns: 1fr 2fr; |
61 grid-definition-rows: 3fr 4fr; | 61 grid-template-rows: 3fr 4fr; |
62 } | 62 } |
63 .gridWithFractionMinMax { | 63 .gridWithFractionMinMax { |
64 grid-definition-columns: minmax(min-content, 45px) 2fr; | 64 grid-template-columns: minmax(min-content, 45px) 2fr; |
65 grid-definition-rows: 3fr minmax(14px, max-content); | 65 grid-template-rows: 3fr minmax(14px, max-content); |
66 } | 66 } |
67 .gridWithCalcCalc { | 67 .gridWithCalcCalc { |
68 grid-definition-columns: calc(200px) calc(10em); | 68 grid-template-columns: calc(200px) calc(10em); |
69 grid-definition-rows: calc(15em) calc(75px); | 69 grid-template-rows: calc(15em) calc(75px); |
70 font: 10px Ahem; | 70 font: 10px Ahem; |
71 } | 71 } |
72 .gridWithCalcAndFixed { | 72 .gridWithCalcAndFixed { |
73 grid-definition-columns: calc(50%) 8em; | 73 grid-template-columns: calc(50%) 8em; |
74 grid-definition-rows: 88px calc(25%); | 74 grid-template-rows: 88px calc(25%); |
75 font: 10px Ahem; | 75 font: 10px Ahem; |
76 } | 76 } |
77 .gridWithCalcAndMinMax { | 77 .gridWithCalcAndMinMax { |
78 grid-definition-columns: calc(30px + 20%) minmax(min-content, 80px); | 78 grid-template-columns: calc(30px + 20%) minmax(min-content, 80px); |
79 grid-definition-rows: minmax(25%, max-content) calc(10% - 7px); | 79 grid-template-rows: minmax(25%, max-content) calc(10% - 7px); |
80 } | 80 } |
81 .gridWithCalcInsideMinMax { | 81 .gridWithCalcInsideMinMax { |
82 grid-definition-columns: minmax(calc(23px + 10%), 400px) 12em; | 82 grid-template-columns: minmax(calc(23px + 10%), 400px) 12em; |
83 grid-definition-rows: calc(150px) minmax(5%, calc(50% - 125px)); | 83 grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px)); |
84 font: 10px Ahem; | 84 font: 10px Ahem; |
85 } | 85 } |
86 </style> | 86 </style> |
87 <script src="../../resources/js-test.js"></script> | 87 <script src="../../resources/js-test.js"></script> |
88 </head> | 88 </head> |
89 <body> | 89 <body> |
90 <div class="gridWithFixed" id="gridWithFixedElement"></div> | 90 <div class="gridWithFixed" id="gridWithFixedElement"></div> |
91 <div class="gridWithPercent" id="gridWithPercentElement"></div> | 91 <div class="gridWithPercent" id="gridWithPercentElement"></div> |
92 <div class="gridWithAuto" id="gridWithAutoElement"></div> | 92 <div class="gridWithAuto" id="gridWithAutoElement"></div> |
93 <div class="gridWithEM" id="gridWithEMElement"></div> | 93 <div class="gridWithEM" id="gridWithEMElement"></div> |
94 <div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> | 94 <div class="gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div> |
95 <div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> | 95 <div class="gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div> |
96 <div class="gridWithThreeItems" id="gridWithThreeItems"></div> | 96 <div class="gridWithThreeItems" id="gridWithThreeItems"></div> |
97 <div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPer
cent"></div> | 97 <div class="gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPer
cent"></div> |
98 <div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvail
able"></div> | 98 <div class="gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvail
able"></div> |
99 <div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div> | 99 <div class="gridWithMinMaxContent" id="gridWithMinMaxContent"></div> |
100 <div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> | 100 <div class="gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div> |
101 <div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent">
</div> | 101 <div class="gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent">
</div> |
102 <div class="gridWithFractionFraction" id="gridWithFractionFraction"></div> | 102 <div class="gridWithFractionFraction" id="gridWithFractionFraction"></div> |
103 <div class="gridWithFractionMinMax" id="gridWithFractionMinMax"></div> | 103 <div class="gridWithFractionMinMax" id="gridWithFractionMinMax"></div> |
104 <div class="gridWithCalcCalc" id="gridWithCalcCalc"></div> | 104 <div class="gridWithCalcCalc" id="gridWithCalcCalc"></div> |
105 <div class="gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> | 105 <div class="gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div> |
106 <div class="gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div> | 106 <div class="gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div> |
107 <div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div> | 107 <div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div> |
108 <script src="resources/grid-definitions-parsing-utils.js"></script> | 108 <script src="resources/grid-definitions-parsing-utils.js"></script> |
109 <script src="resources/non-grid-columns-rows-get-set-multiple.js"></script> | 109 <script src="resources/non-grid-columns-rows-get-set-multiple.js"></script> |
110 </body> | 110 </body> |
111 </html> | 111 </html> |
OLD | NEW |