grid-flex-min-sizing-001.html (8292B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: flex/auto min-sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-minmax"> 11 <link rel="match" href="grid-flex-min-sizing-001-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 border: 1px solid; 18 float: left; 19 min-width:100px; 20 } 21 .fixed .grid { 22 width:140px; 23 } 24 25 /* 26 * NOTE Due to a spec change, 'fr' min-sizing inside minmax() is now 27 * invalid, so they were replaced in this test with 'auto' instead (for now). 28 */ 29 30 .g1 { 31 grid-template-columns: minmax(auto,min-content) 32 minmax(auto,0) 33 minmax(auto,0) 34 1fr; 35 } 36 37 .g2 { 38 grid-template-columns: minmax(auto,max-content) 39 minmax(auto,0) 40 minmax(auto,0) 41 1fr; 42 } 43 44 .g3 { 45 grid-template-columns: minmax(auto,auto) 46 minmax(auto,0) 47 minmax(auto,0) 48 1fr; 49 } 50 51 .g4 { 52 grid-template-columns: minmax(auto,0) 53 minmax(auto,0) 54 minmax(auto,0) 55 1fr; 56 } 57 58 .g5 { 59 grid-template-columns: minmax(20px,0) 60 minmax(auto,0) 61 minmax(auto,0) 62 1fr; 63 } 64 65 .g6 { 66 grid-template-columns: minmax(auto,0) 67 minmax(auto,0) 68 minmax(auto,0) 69 20px; 70 } 71 72 .g7 { 73 grid-template-columns: minmax(20px,1fr) 74 minmax(auto,0) 75 minmax(auto,0) 76 20px; 77 } 78 79 .g8 { 80 grid-template-columns: minmax(auto,1fr) 81 minmax(auto,0) 82 minmax(auto,0) 83 20px; 84 } 85 86 .g9 { 87 grid-template-columns: 20px 88 30px 89 minmax(auto,0) 90 10px; 91 } 92 93 .gA { 94 grid-template-columns: minmax(auto,0) 95 minmax(min-content,40px) 96 minmax(auto,0) 97 20px; 98 } 99 100 .gB { 101 grid-template-columns: minmax(auto,0) 102 minmax(auto,40px) 103 minmax(auto,0) 104 20px; 105 } 106 107 .gC { 108 grid-template-columns: minmax(auto,20px) 109 minmax(auto,40px) 110 minmax(auto,0) 111 20px; 112 } 113 114 .gD { 115 grid-template-columns: minmax(auto,20px) 116 minmax(auto,40px) 117 minmax(auto,0) 118 min-content; 119 } 120 121 .gE { 122 grid-template-columns: minmax(auto,20px) 123 minmax(auto,40px) 124 minmax(auto,20px) 125 auto; 126 } 127 128 .gF { 129 grid-template-columns: minmax(auto,20px) 130 minmax(min-content,max-content) 131 minmax(auto,40px) 132 auto; 133 } 134 135 136 .t { grid-column: span 3; border:2px solid; } 137 .d1 { grid-column: 1 / span 2; background: grey; } 138 .d3 { grid-column: 3 / span 2; background: blue; } 139 div { min-width:0; min-height:10px; } 140 t { display:inline-block; width:20px; } 141 142 </style> 143 </head> 144 <body> 145 146 147 <div class="g1 grid"> 148 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 149 <div class="d1"></div> 150 <div class="d3"></div> 151 </div> 152 153 <div class="g2 grid"> 154 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 155 <div class="d1"></div> 156 <div class="d3"></div> 157 </div> 158 159 <div class="g3 grid"> 160 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 161 <div class="d1"></div> 162 <div class="d3"></div> 163 </div> 164 165 <div class="g4 grid"> 166 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 167 <div class="d1"></div> 168 <div class="d3"></div> 169 </div> 170 171 <div class="g5 grid"> 172 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 173 <div class="d1"></div> 174 <div class="d3"></div> 175 </div> 176 177 <br clear="all" style="margin-top:100px"> 178 179 <div class="g6 grid"> 180 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 181 <div class="d1"></div> 182 <div class="d3"></div> 183 </div> 184 185 <div class="g7 grid"> 186 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 187 <div class="d1"></div> 188 <div class="d3"></div> 189 </div> 190 191 <div class="g8 grid"> 192 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 193 <div class="d1"></div> 194 <div class="d3"></div> 195 </div> 196 197 <div class="g9 grid"> 198 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 199 <div class="d1"></div> 200 <div class="d3"></div> 201 </div> 202 203 <br clear="all" style="margin-top:100px"> 204 205 <div class="gA grid"> 206 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 207 <div class="d1"></div> 208 <div class="d3"></div> 209 </div> 210 211 <div class="gB grid"> 212 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 213 <div class="d1"></div> 214 <div class="d3"></div> 215 </div> 216 217 <div class="gC grid"> 218 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 219 <div class="d1"></div> 220 <div class="d3"></div> 221 </div> 222 223 <div class="gD grid"> 224 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 225 <div class="d1"></div> 226 <div class="d3"></div> 227 </div> 228 229 <div class="gE grid"> 230 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 231 <div class="d1"></div> 232 <div class="d3"></div> 233 </div> 234 235 <div class="gF grid"> 236 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 237 <div class="d1"></div> 238 <div class="d3"></div> 239 </div> 240 241 <br clear="all" style="margin-top:100px"> 242 243 <span class="fixed"> 244 <div class="g1 grid"> 245 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 246 <div class="d1"></div> 247 <div class="d3"></div> 248 </div> 249 250 <div class="g2 grid"> 251 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 252 <div class="d1"></div> 253 <div class="d3"></div> 254 </div> 255 256 <div class="g3 grid"> 257 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 258 <div class="d1"></div> 259 <div class="d3"></div> 260 </div> 261 262 <div class="g4 grid"> 263 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 264 <div class="d1"></div> 265 <div class="d3"></div> 266 </div> 267 268 <div class="g5 grid"> 269 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 270 <div class="d1"></div> 271 <div class="d3"></div> 272 </div> 273 274 <br clear="all" style="margin-top:100px"> 275 276 <div class="g6 grid"> 277 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 278 <div class="d1"></div> 279 <div class="d3"></div> 280 </div> 281 282 <div class="g7 grid"> 283 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 284 <div class="d1"></div> 285 <div class="d3"></div> 286 </div> 287 288 <div class="g8 grid"> 289 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 290 <div class="d1"></div> 291 <div class="d3"></div> 292 </div> 293 294 <div class="g9 grid"> 295 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 296 <div class="d1"></div> 297 <div class="d3"></div> 298 </div> 299 300 <br clear="all" style="margin-top:100px"> 301 302 <div class="gA grid"> 303 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 304 <div class="d1"></div> 305 <div class="d3"></div> 306 </div> 307 308 <div class="gB grid"> 309 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 310 <div class="d1"></div> 311 <div class="d3"></div> 312 </div> 313 314 <div class="gC grid"> 315 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 316 <div class="d1"></div> 317 <div class="d3"></div> 318 </div> 319 320 <div class="gD grid"> 321 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 322 <div class="d1"></div> 323 <div class="d3"></div> 324 </div> 325 326 <br clear="all" style="margin-top:100px"> 327 328 <div class="gE grid"> 329 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 330 <div class="d1"></div> 331 <div class="d3"></div> 332 </div> 333 334 <div class="gF grid"> 335 <div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div> 336 <div class="d1"></div> 337 <div class="d3"></div> 338 </div> 339 340 </span> 341 342 </body> 343 </html>