1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
<!DOCTYPE html>
<html>
<head>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.definite {
/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
width: 800px;
height: 600px;
}
.gridItem {
grid-column: 1;
grid-row: 1;
width: 7px;
height: 11px;
}
.gridItem2 {
grid-column: 2;
grid-row: 2;
width: 17px;
height: 3px;
}
.gridWithFixed {
grid-template-columns: 7px 11px;
grid-template-rows: 17px 2px;
}
.gridWithPercent {
grid-template-columns: 53% 99%;
grid-template-rows: 27% 52%;
}
.gridWithAuto {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.gridWithEM {
grid-template-columns: 10em 12em;
grid-template-rows: 15em 17em;
font: 10px Ahem;
}
.gridWithNoneAndAuto {
grid-template-columns: none auto;
grid-template-rows: none auto;
}
.gridNoneWithAndFixed {
grid-template-columns: none 15px;
grid-template-rows: none 22px;
}
.gridWithThreeItems {
grid-template-columns: 15px auto 10em;
grid-template-rows: 12em 18px auto;
font: 10px Ahem;
}
.gridWithPercentAndViewportPercent {
grid-template-columns: 50% 15vw;
grid-template-rows: 35% 28vh;
}
.gridWithFitContentAndFitAvailable {
grid-template-columns: -webkit-content-available;
grid-template-rows: -webkit-fit-content -webkit-fit-available;
}
.gridWithMinMaxContent {
grid-template-columns: min-content max-content;
grid-template-rows: max-content min-content;
}
.gridWithMinMaxAndFixed {
grid-template-columns: minmax(45px, 30%) 15px;
grid-template-rows: 12em minmax(35%, 10px);
font: 10px Ahem;
}
.gridWithMinMaxAndMinMaxContent {
grid-template-columns: minmax(min-content, 30%) 15px;
grid-template-rows: 12em minmax(35%, max-content);
font: 10px Ahem;
}
.gridWithFractionFraction {
grid-template-columns: 2fr 3fr;
grid-template-rows: 3fr 5fr;
}
.gridWithFractionMinMax {
grid-template-columns: minmax(min-content, 45px) 2fr;
grid-template-rows: 3fr minmax(14px, max-content);
}
.gridWithCalcCalc {
grid-template-columns: calc(200px) calc(10em);
grid-template-rows: calc(15em) calc(75px);
font: 10px Ahem;
}
.gridWithCalcAndFixed {
grid-template-columns: calc(50%) 8em;
grid-template-rows: 88px calc(25%);
font: 10px Ahem;
}
.gridWithCalcAndMinMax {
grid-template-columns: calc(30px + 20%) minmax(min-content, 80px);
grid-template-rows: minmax(25%, max-content) calc(10% - 7px);
}
.gridWithCalcInsideMinMax {
grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
font: 10px Ahem;
}
.gridWithAutoInsideMinMax {
grid-template-columns: minmax(auto, min-content) 30px;
grid-template-rows: calc(100px + 2em) minmax(10%, auto);
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
<div class="gridItem"></div>
</div>
<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement">
<div class="gridItem2"></div>
</div>
<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div>
<div class="grid definite gridWithPercentAndViewportPercent" id="gridWithPercentAndViewportPercent"></div>
<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
<div class="gridItem"></div>
<div class="gridItem2"></div>
</div>
<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div>
<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div>
<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script src="resources/grid-columns-rows-get-set-multiple.js"></script>
</body>
</html>
|
