OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <link href="resources/grid.css" rel="stylesheet"> | |
3 <style> | |
4 .grid { | |
5 justify-content: start; | |
6 width: 100px; | |
7 position: relative; | |
8 padding-top: 10px; | |
9 margin-bottom: 5px; | |
10 grid-column-gap: 5px; | |
11 } | |
12 | |
13 .fc0 { grid-template-columns: minmax(auto, 0px);} | |
Manuel Rego
2016/08/31 07:24:29
The name of the class is not accurate (as it's not
| |
14 .fc40 { grid-template-columns: minmax(auto, 40px); } | |
15 .fc80 { grid-template-columns: minmax(auto, 80px); } | |
16 .fc110 { grid-template-columns: auto; } | |
17 | |
18 .fc0x2 { grid-template-columns: repeat(2, minmax(auto, 0px));} | |
19 .fc40x2 { grid-template-columns: repeat(2, minmax(auto, 40px)); } | |
Manuel Rego
2016/08/31 07:24:29
You're not using this class and maybe other define
| |
20 .fc80x2 { grid-template-columns: repeat(2, minmax(auto, 80px)); } | |
21 .fc110x2 { grid-template-columns: auto auto; } | |
22 | |
23 .fc0p { grid-template-columns: minmax(auto, 0%); } | |
24 .fc30p { grid-template-columns: minmax(auto, 30%); } | |
25 .fc90p { grid-template-columns: minmax(auto, 90%); } | |
26 .fc110p { grid-template-columns: auto; } | |
27 | |
28 .fc0px2 { grid-template-columns: repeat(2, minmax(auto, 0%)); } | |
29 .fc30px2 { grid-template-columns: repeat(2, minmax(auto, 30%)); } | |
30 .fc90px2 { grid-template-columns: repeat(2, minmax(auto, 90%)); } | |
31 .fc110px2 { grid-template-columns: auto auto; } | |
32 | |
33 .item { | |
34 font: 10px/1 Ahem; | |
35 background: cyan; | |
36 } | |
37 | |
38 .spanningItem { | |
39 font: 10px/1 Ahem; | |
40 grid-column: 1 / -1; | |
41 grid-row: 2; | |
42 background: salmon; | |
43 } | |
44 | |
45 .test { | |
46 position: absolute; | |
47 left: 0; right: 0; top: 0; | |
48 height: 5px; | |
49 background: purple; | |
50 } | |
51 .test:nth-child(2n) { background: orange; } | |
52 | |
53 .floatLeft { | |
54 float: left; | |
55 width: 190px; | |
56 } | |
57 | |
58 .firstColumn { grid-column: 1 / 2; } | |
59 .secondColumn { grid-column: 2 / 3; } | |
60 .thirdColumn { grid-column: 3 / 4; } | |
61 | |
62 h3 { font-size: 1em; } | |
63 </style> | |
64 | |
65 <p>This test checks that 'fit-content()' works as expected, i.e., it's similar t o 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped a t the argument of 'fit-content' (if greater that the 'auto' minimum).</p> | |
66 | |
67 <div class="floatLeft"> | |
68 <h3>Only fit-content() and with fixed size tracks.</h3> | |
69 <div class="grid fc0"> | |
Manuel Rego
2016/08/31 07:24:29
I guess "grid-template-columns: auto" could be eno
svillar
2016/08/31 09:50:04
In this case yes, but I'm using exactly the same n
| |
70 <div class="item">XXX</div> | |
71 <div class="test firstColumn"></div> | |
72 </div> | |
73 | |
74 <div class="grid fc0x2"> | |
Manuel Rego
2016/08/31 07:24:29
Same here for "auto auto".
svillar
2016/08/31 09:50:04
Ditto.
| |
75 <div class="item">XXX</div> | |
76 <div class="spanningItem">XXX</div> | |
77 <div class="test firstColumn"></div> | |
78 <div class="test secondColumn"></div> | |
79 </div> | |
80 | |
81 <div class="grid fc40"> | |
Manuel Rego
2016/08/31 07:24:28
Maybe here "grid-template-columns: 40px" is more e
svillar
2016/08/31 09:50:04
Ditto.
| |
82 <div class="item">XXX XXX</div> | |
83 <div class="test firstColumn"></div> | |
84 </div> | |
85 | |
86 <div class="grid" style="grid-template-columns: auto auto;"> | |
87 <div class="spanningItem">XXX XXX</div> | |
88 <div class="test firstColumn"></div> | |
89 <div class="test secondColumn"></div> | |
90 </div> | |
91 | |
92 <div class="grid" style="grid-template-columns: minmax(auto, 40px) auto;"> | |
Manuel Rego
2016/08/31 07:24:29
Why not "40px auto" instead of "minmax(auto, 40px)
svillar
2016/08/31 09:50:04
Because they are not the same. A 40px track is alw
| |
93 <div class="item">XXX XXX</div> | |
94 <div class="spanningItem">XXX XXX</div> | |
95 <div class="test firstColumn"></div> | |
96 <div class="test secondColumn"></div> | |
97 </div> | |
98 | |
99 <div class="grid fc80"> | |
Manuel Rego
2016/08/31 07:24:28
And here maybe "80px".
svillar
2016/08/31 09:50:04
Ditto about using the exact same class names as in
| |
100 <div class="item">XXX XXX XXX</div> | |
101 <div class="test firstColumn"></div> | |
102 </div> | |
103 | |
104 <div class="grid fc80x2"> | |
Manuel Rego
2016/08/31 07:24:29
This is confusing as you're using "repeat(2, minma
| |
105 <div class="spanningItem">XXX XXX XXX</div> | |
106 <div class="test firstColumn"></div> | |
107 <div class="test secondColumn"></div> | |
108 </div> | |
109 | |
110 <div class="grid" style="grid-template-columns: auto minmax(auto, 80px)"> | |
111 <div class="item secondColumn">XXX XXX XXX</div> | |
112 <div class="spanningItem">XXX XXX XXX</div> | |
113 <div class="test firstColumn"></div> | |
114 <div class="test secondColumn"></div> | |
115 </div> | |
116 | |
117 <div class="grid" style="grid-template-columns: minmax(auto, 20px) 50%;"> | |
118 <div class="spanningItem">XXX XX XXX</div> | |
119 <div class="test firstColumn"></div> | |
120 <div class="test secondColumn"></div> | |
121 </div> | |
122 | |
123 <div class="grid" style="grid-template-columns: minmax(10px, 40px) minmax(au to, 40px);"> | |
124 <div class="item">XXXXX</div> | |
125 <div class="spanningItem">XXX XX XXX</div> | |
126 <div class="test firstColumn"></div> | |
127 <div class="test secondColumn"></div> | |
128 </div> | |
129 | |
130 <div class="grid" style="grid-template-columns: auto minmax(10%, 200px);"> | |
131 <div class="item secondColumn">XXXXX</div> | |
132 <div class="spanningItem">XXX XX XXX</div> | |
133 <div class="test firstColumn"></div> | |
134 <div class="test secondColumn"></div> | |
135 </div> | |
136 | |
137 </div> | |
138 | |
139 <div class="floatLeft"> | |
140 <h3>fit-content() with other content-sized tracks.</h3> | |
141 <div class="grid" style="grid-template-columns: minmax(auto, 40px) max-conte nt;"> | |
142 <div class="spanningItem">XXX XX XXX</div> | |
143 <div class="test firstColumn"></div> | |
144 <div class="test secondColumn"></div> | |
145 </div> | |
146 | |
147 <div class="grid" style="grid-template-columns: minmax(auto, 40px) max-conte nt;"> | |
148 <div class="item">XXXXX</div> | |
149 <div class="spanningItem">XXX XX XXX</div> | |
150 <div class="test firstColumn"></div> | |
151 <div class="test secondColumn"></div> | |
152 </div> | |
153 | |
154 <div class="grid" style="grid-template-columns: minmax(auto, 40px) max-conte nt;"> | |
155 <div class="item secondColumn">XXXXX</div> | |
156 <div class="spanningItem">XXX XX XXX</div> | |
157 <div class="test firstColumn"></div> | |
158 <div class="test secondColumn"></div> | |
159 </div> | |
160 | |
161 <div class="grid" style="grid-template-columns: min-content minmax(auto, 40p x);"> | |
162 <div class="spanningItem">XXX XX XXX</div> | |
163 <div class="test firstColumn"></div> | |
164 <div class="test secondColumn"></div> | |
165 </div> | |
166 | |
167 <div class="grid" style="grid-template-columns: min-content minmax(auto, 40p x);"> | |
168 <div class="item">XXXXX</div> | |
169 <div class="spanningItem">XXX XX XXX</div> | |
170 <div class="test firstColumn"></div> | |
171 <div class="test secondColumn"></div> | |
172 </div> | |
173 | |
174 <div class="grid" style="grid-template-columns: min-content minmax(auto, 40p x);"> | |
175 <div class="item secondColumn">XXXXX</div> | |
176 <div class="spanningItem">XXX XX XXX</div> | |
177 <div class="test firstColumn"></div> | |
178 <div class="test secondColumn"></div> | |
179 </div> | |
180 | |
181 <div class="grid" style="grid-template-columns: minmax(auto, 30px) min-conte nt max-content"> | |
182 <div class="spanningItem">XXX XX XXX</div> | |
183 <div class="test firstColumn"></div> | |
184 <div class="test secondColumn"></div> | |
185 <div class="test thirdColumn"></div> | |
186 </div> | |
187 | |
188 <div class="grid" style="grid-template-columns: min-content minmax(auto, 30p x) max-content"> | |
189 <div class="spanningItem">XXX XX XXX</div> | |
190 <div class="test firstColumn"></div> | |
191 <div class="test secondColumn"></div> | |
192 <div class="test thirdColumn"></div> | |
193 </div> | |
194 | |
195 <div class="grid" style="grid-template-columns: min-content max-content minm ax(auto, 30px)"> | |
196 <div class="spanningItem">XXX XX XXX</div> | |
197 <div class="test firstColumn"></div> | |
198 <div class="test secondColumn"></div> | |
199 <div class="test thirdColumn"></div> | |
200 </div> | |
201 | |
202 <div class="grid" style="grid-template-columns: minmax(auto, 30px) min-conte nt max-content"> | |
203 <div class="item" style="grid-column: 1">XXX XX</div> | |
204 <div class="spanningItem">XXX XX XXX</div> | |
205 <div class="test firstColumn"></div> | |
206 <div class="test secondColumn"></div> | |
207 <div class="test thirdColumn"></div> | |
208 </div> | |
209 | |
210 <div class="grid" style="grid-template-columns: min-content minmax(auto, 30p x) max-content"> | |
211 <div class="item" style="grid-column: 1">XXX XX</div> | |
212 <div class="spanningItem">XXX XX XXX</div> | |
213 <div class="test firstColumn"></div> | |
214 <div class="test secondColumn"></div> | |
215 <div class="test thirdColumn"></div> | |
216 </div> | |
217 | |
218 <div class="grid" style="grid-template-columns: min-content max-content minm ax(auto, 30px)"> | |
219 <div class="item" style="grid-column: 2">XXX XX</div> | |
220 <div class="spanningItem">XXX XX XXX</div> | |
221 <div class="test firstColumn"></div> | |
222 <div class="test secondColumn"></div> | |
223 <div class="test thirdColumn"></div> | |
224 </div> | |
225 </div> | |
226 | |
227 <div class="floatLeft"> | |
228 <h3>fit-content() with percentage arguments.</h3> | |
229 <div class="grid fc0p"> | |
230 <div class="item">XXX</div> | |
231 <div class="test firstColumn"></div> | |
232 </div> | |
233 | |
234 <div class="grid fc0px2"> | |
235 <div class="item">XXX</div> | |
236 <div class="spanningItem">XXX</div> | |
237 <div class="test firstColumn"></div> | |
238 <div class="test secondColumn"></div> | |
239 </div> | |
240 | |
241 <div class="grid fc30p"> | |
242 <div class="item">XX XX</div> | |
243 <div class="test firstColumn"></div> | |
244 </div> | |
245 | |
246 <div class="grid fc30px2"> | |
247 <div class="spanningItem">XXX XXX</div> | |
248 <div class="test firstColumn"></div> | |
249 <div class="test secondColumn"></div> | |
250 </div> | |
251 | |
252 <div class="grid fc30px2"> | |
253 <div class="item secondColumn">X X X</div> | |
254 <div class="spanningItem">XXX XXX</div> | |
255 <div class="test firstColumn"></div> | |
256 <div class="test secondColumn"></div> | |
257 </div> | |
258 | |
259 <div class="grid fc90p"> | |
260 <div class="item">XXX XXX XXX</div> | |
261 <div class="test firstColumn"></div> | |
262 </div> | |
263 | |
264 <div class="grid fc90px2"> | |
265 <div class="spanningItem">XXX XXX XXX</div> | |
266 <div class="test firstColumn"></div> | |
267 <div class="test secondColumn"></div> | |
268 </div> | |
269 | |
270 <div class="grid" style="grid-template-columns: auto minmax(auto, 90%)"> | |
271 <div class="item secondColumn">XXX XXX XXX</div> | |
272 <div class="spanningItem">XXX XXX XXX</div> | |
273 <div class="test firstColumn"></div> | |
274 <div class="test secondColumn"></div> | |
275 </div> | |
276 </div> | |
277 | |
278 <div class="floatLeft"> | |
279 <h3>max-content < fit-content() argument.</h3> | |
280 | |
281 <div class="grid fc110"> | |
282 <div class="item">XXX XXX</div> | |
283 <div class="test firstColumn"></div> | |
284 </div> | |
285 | |
286 <div class="grid fc110x2"> | |
287 <div class="spanningItem">XXX XXX</div> | |
288 <div class="test firstColumn"></div> | |
289 <div class="test secondColumn"></div> | |
290 </div> | |
291 | |
292 <div class="grid fc110x2"> | |
293 <div class="item">XXX XXX</div> | |
294 <div class="spanningItem">XXX XXX</div> | |
295 <div class="test firstColumn"></div> | |
296 <div class="test secondColumn"></div> | |
297 </div> | |
298 | |
299 <div class="grid" style="grid-template-columns: auto auto;"> | |
300 <div class="spanningItem">XXX XXX</div> | |
301 <div class="test firstColumn"></div> | |
302 <div class="test secondColumn"></div> | |
303 </div> | |
304 | |
305 <div class="grid" style="grid-template-columns: auto auto;"> | |
306 <div class="item secondColumn">XX</div> | |
307 <div class="spanningItem">XXX XXX</div> | |
308 <div class="test firstColumn"></div> | |
309 <div class="test secondColumn"></div> | |
310 </div> | |
311 | |
312 <div class="grid" style="grid-template-columns: max-content auto;"> | |
313 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> | |
314 <div class="spanningItem">XXX XXX</div> | |
315 <div class="test firstColumn"></div> | |
316 <div class="test secondColumn"></div> | |
317 </div> | |
318 | |
319 <div class="grid" style="grid-template-columns: auto min-content;"> | |
320 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> | |
321 <div class="spanningItem">XXX XXX</div> | |
322 <div class="test firstColumn"></div> | |
323 <div class="test secondColumn"></div> | |
324 </div> | |
325 | |
326 <div class="grid" style="grid-template-columns: max-content auto max-content ;"> | |
327 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> | |
328 <div class="spanningItem">XXX XXX</div> | |
329 <div class="test firstColumn"></div> | |
330 <div class="test secondColumn"></div> | |
331 <div class="test thirdColumn"></div> | |
332 </div> | |
333 | |
334 <div class="grid" style="grid-template-columns: min-content auto min-content ;"> | |
335 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> | |
336 <div class="spanningItem">XXX XXX</div> | |
337 <div class="test firstColumn"></div> | |
338 <div class="test secondColumn"></div> | |
339 <div class="test thirdColumn"></div> | |
340 </div> | |
341 | |
342 <div class="grid" style="grid-template-columns: auto auto auto;"> | |
343 <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> | |
344 <div class="spanningItem">XXX XXX</div> | |
345 <div class="test firstColumn"></div> | |
346 <div class="test secondColumn"></div> | |
347 <div class="test thirdColumn"></div> | |
348 </div> | |
349 | |
350 </div> | |
OLD | NEW |