1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
4 <link href="resources/grid.css" rel="stylesheet">
7 /* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
24 grid-template-columns: none;
25 grid-template-rows: none;
28 grid-template-columns: 10px;
29 grid-template-rows: 15px;
32 grid-template-columns: 50%;
33 grid-template-rows: 25%;
36 grid-template-columns: auto;
37 grid-template-rows: auto;
40 grid-template-columns: 10em;
41 grid-template-rows: 15em;
44 .gridWithViewPortPercentage {
45 grid-template-columns: 8vw;
46 grid-template-rows: 10vh;
49 grid-template-columns: -webkit-fit-content;
50 grid-template-rows: -webkit-fit-content;
52 .gridWithFitAvailable {
53 grid-template-columns: -webkit-fit-available;
54 grid-template-rows: -webkit-fit-available;
57 grid-template-columns: minmax(10%, 15px);
58 grid-template-rows: minmax(20px, 50%);
61 grid-template-columns: min-content;
62 grid-template-rows: min-content;
65 grid-template-columns: max-content;
66 grid-template-rows: max-content;
69 grid-template-columns: 1fr;
70 grid-template-rows: 2fr;
73 grid-template-columns: calc(150px);
74 grid-template-rows: calc(75px);
76 .gridWithCalcComplex {
77 grid-template-columns: calc(50% + 150px);
78 grid-template-rows: calc(65% + 75px);
80 .gridWithCalcInsideMinMax {
81 grid-template-columns: minmax(10%, calc(15px));
82 grid-template-rows: minmax(calc(20px), 50%);
84 .gridWithCalcComplexInsideMinMax {
85 grid-template-columns: minmax(10%, calc(50% + 15px));
86 grid-template-rows: minmax(calc(20px + 10%), 50%);
89 <script src="../../resources/js-test.js"></script>
92 <div class="grid gridWithNone" id="gridWithNoneElement"></div>
93 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
94 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
95 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"></div>
96 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
97 <div class="gridItem"></div>
99 <div class="grid gridWithAuto" id="gridWithAutoElement"></div>
100 <div class="grid gridWithAuto" id="gridWithAutoWithoutSizeElement"></div>
101 <div class="grid gridWithAuto fontSpec" id="gridWithAutoWithChildrenElement">
102 <div class="gridItem"></div>
104 <div class="grid gridWithEM" id="gridWithEMElement"></div>
105 <div class="grid gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
106 <div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
107 <div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
108 <div class="grid gridWithMinMax" id="gridWithMinMaxElement"></div>
109 <div class="grid gridWithMinContent" id="gridWithMinContentElement"></div>
110 <div class="grid gridWithMinContent" id="gridWithMinContentWithChildrenElement">
111 <div class="gridItem"></div>
112 <div class="gridItem2"></div>
114 <div class="grid gridWithMaxContent" id="gridWithMaxContentElement"></div>
115 <div class="grid gridWithMaxContent" id="gridWithMaxContentWithChildrenElement">
116 <div class="gridItem"></div>
117 <div class="gridItem2"></div>
119 <div class="grid gridWithFraction" id="gridWithFractionElement"></div>
120 <div class="grid gridWithCalc" id="gridWithCalcElement"></div>
121 <div class="grid gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
122 <div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
123 <div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
124 <script src="resources/grid-definitions-parsing-utils.js"></script>
125 <script src="resources/grid-columns-rows-get-set.js"></script>