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