grid-repeat-auto-fill-fit-010-ref.html (6951B)
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>Reference: intrinsic grid container size with repeat(auto-fill/auto-fit) under min-content constraint</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1280798"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 /* We use overflow:hidden on root scroller to work around bug 1873749: */ 14 overflow: hidden; 15 } 16 17 .grid { 18 display: grid; 19 border: 1px solid; 20 } 21 22 .inline-grid { 23 display: inline-grid; 24 grid: min-content 40px / min-content 40px; 25 border: 3px dotted silver; 26 align-items: start; 27 justify-items: start; 28 } 29 30 .cfill { grid: auto auto / repeat(3, 100px); } 31 .rfill { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; } 32 fit .cfill { grid: auto auto / repeat(2, 100px); } 33 fit .rfill { grid: repeat(2, 50px) / auto auto; grid-auto-flow:column; } 34 .r3 { grid: repeat(3, 50px) / auto auto; grid-auto-flow:column; } 35 36 span:nth-of-type(1) { background: magenta; } 37 span:nth-of-type(2) { background: cyan; } 38 span:nth-of-type(3) { background: yellow; } 39 span:nth-of-type(4) { background: lime; } 40 41 x { 42 display: inline-block; 43 width: 20px; 44 height: 30px; 45 } 46 47 y { 48 grid-row: 2; 49 align-self: stretch; 50 justify-self: stretch; 51 min-width: 10px; 52 min-height: 10px; 53 background: grey; 54 } 55 .fill { 56 min-width: -moz-available; 57 min-width: -webkit-fill-available; 58 min-width: fill; 59 } 60 .rfill.fill { 61 min-height: -moz-available; 62 min-height: -webkit-fill-available; 63 min-height: fill; 64 } 65 </style> 66 </head> 67 <body> 68 69 <div class="inline-grid"> 70 <div class="grid cfill" style="min-width:250px"> 71 <span><x></x></span> 72 <span><x></x></span> 73 <span><x></x></span> 74 <span><x></x></span> 75 </div> 76 <y></y> 77 </div> 78 79 <div class="inline-grid"> 80 <div class="grid cfill" style="max-width:250px; grid-template-columns: 100px 100px"> 81 <span><x></x></span> 82 <span><x></x></span> 83 <span><x></x></span> 84 <span><x></x></span> 85 </div> 86 <y></y> 87 </div> 88 89 <div class="inline-grid"> 90 <div class="grid cfill" style="min-width:350px; max-width:250px"> 91 <span><x></x></span> 92 <span><x></x></span> 93 <span><x></x></span> 94 <span><x></x></span> 95 </div> 96 <y></y> 97 </div> 98 99 <div class="inline-grid"> 100 <div class="grid cfill" style="grid-template-columns:100px"> 101 <span><x></x></span> 102 <span><x></x></span> 103 <span><x></x></span> 104 <span><x></x></span> 105 </div> 106 <y></y> 107 </div> 108 109 <div class="inline-grid"> 110 <div class="grid cfill" style="grid-template-columns:100px"> 111 <span><x></x></span> 112 <span><x></x></span> 113 <span><x></x></span> 114 <span><x></x></span> 115 </div> 116 <y></y> 117 </div> 118 119 <div class="inline-grid"> 120 <div class="grid cfill" style="grid-template-columns:100px"> 121 <span><x></x></span> 122 <span><x></x></span> 123 <span><x></x></span> 124 <span><x></x></span> 125 </div> 126 <y></y> 127 </div> 128 129 <div class="inline-grid"> 130 <div class="grid cfill" style="grid-template-columns:100px"> 131 <span><x></x></span> 132 <span><x></x></span> 133 <span><x></x></span> 134 <span><x></x></span> 135 </div> 136 <y></y> 137 </div> 138 139 <div class="inline-grid"> 140 <div class="grid rfill" style="min-height:120px"> 141 <span><x></x></span> 142 <span><x></x></span> 143 <span><x></x></span> 144 <span><x></x></span> 145 </div> 146 <y></y> 147 </div> 148 149 <div class="inline-grid"> 150 <div class="grid rfill" style="max-height:160px;"> 151 <span><x></x></span> 152 <span><x></x></span> 153 <span><x></x></span> 154 <span><x></x></span> 155 </div> 156 <y></y> 157 </div> 158 159 <div class="inline-grid"> 160 <div class="grid rfill" style="min-height:120px; max-height:100px; grid-template-rows: 50px 50px"> 161 <span><x></x></span> 162 <span><x></x></span> 163 <span><x></x></span> 164 <span><x></x></span> 165 </div> 166 <y></y> 167 </div> 168 169 <div class="inline-grid"> 170 <div class="grid rfill" style="min-height:160px; max-height:100px;"> 171 <span><x></x></span> 172 <span><x></x></span> 173 <span><x></x></span> 174 <span><x></x></span> 175 </div> 176 <y></y> 177 </div> 178 179 <div class="inline-grid"> 180 <div class="grid rfill" style="grid-template-rows:50px"> 181 <span><x></x></span> 182 <span><x></x></span> 183 <span><x></x></span> 184 <span><x></x></span> 185 </div> 186 <y></y> 187 </div> 188 189 <div class="inline-grid"> 190 <div class="grid rfill" style="grid-template-rows:50px"> 191 <span><x></x></span> 192 <span><x></x></span> 193 <span><x></x></span> 194 <span><x></x></span> 195 </div> 196 <y></y> 197 </div> 198 199 <div class="inline-grid"> 200 <div class="grid rfill" style="grid-template-rows:50px"> 201 <span><x></x></span> 202 <span><x></x></span> 203 <span><x></x></span> 204 <span><x></x></span> 205 </div> 206 <y></y> 207 </div> 208 209 <div class="inline-grid"> 210 <div class="grid rfill" style="grid-template-rows:50px"> 211 <span><x></x></span> 212 <span><x></x></span> 213 <span><x></x></span> 214 <span><x></x></span> 215 </div> 216 <y></y> 217 </div> 218 219 <div class="inline-grid"> 220 <div class="grid r3" style="min-height:120px"> 221 <span><x></x></span> 222 <span><x></x></span> 223 <span><x></x></span> 224 <span><x></x></span> 225 </div> 226 <y></y> 227 </div> 228 229 <fit> 230 231 <div class="inline-grid"> 232 <div class="grid cfill" style="min-width:250px;"> 233 <span><x></x></span> 234 <span><x></x></span> 235 </div> 236 <y></y> 237 </div> 238 239 <div class="inline-grid"> 240 <div class="grid cfill" style="max-width:250px; grid-template-columns: 100px"> 241 <span><x></x></span> 242 </div> 243 <y></y> 244 </div> 245 246 <div class="inline-grid"> 247 <div class="grid cfill" style="min-width:350px; max-width:250px"> 248 <span><x></x></span> 249 <span><x></x></span> 250 </div> 251 <y></y> 252 </div> 253 254 <div class="inline-grid"> 255 <div class="grid cfill" style="grid-template-columns:none"> 256 </div> 257 <y></y> 258 </div> 259 260 <div class="inline-grid"> 261 <div class="grid cfill" style="grid-template-columns:none"> 262 </div> 263 <y></y> 264 </div> 265 266 <div class="inline-grid"> 267 <div class="grid cfill" style="grid-template-columns:none"> 268 </div> 269 <y></y> 270 </div> 271 272 <div class="inline-grid"> 273 <div class="grid cfill fill" style="grid-template-columns:none"> 274 </div> 275 <y></y> 276 </div> 277 278 <div class="inline-grid"> 279 <div class="grid rfill" style="min-height:120px"> 280 <span><x></x></span> 281 <span><x></x></span> 282 </div> 283 <y></y> 284 </div> 285 286 <div class="inline-grid"> 287 <div class="grid rfill" style="max-height:160px;"> 288 <span><x></x></span> 289 <span><x></x></span> 290 </div> 291 <y></y> 292 </div> 293 294 <div class="inline-grid"> 295 <div class="grid rfill" style="min-height:120px; max-height:100px; grid-template-rows: 50px"> 296 <span><x></x></span> 297 </div> 298 <y></y> 299 </div> 300 301 <div class="inline-grid"> 302 <div class="grid rfill" style="min-height:160px; max-height:100px;"> 303 <span><x></x></span> 304 <span><x></x></span> 305 </div> 306 <y></y> 307 </div> 308 309 <div class="inline-grid"> 310 <div class="grid rfill" style="grid-template-rows:none"> 311 </div> 312 <y></y> 313 </div> 314 315 <div class="inline-grid"> 316 <div class="grid rfill" style="grid-template-rows:none"> 317 </div> 318 <y></y> 319 </div> 320 321 <div class="inline-grid"> 322 <div class="grid rfill" style="grid-template-rows:none"> 323 </div> 324 <y></y> 325 </div> 326 327 <div class="inline-grid"> 328 <div class="grid rfill fill" style="grid-template-rows:none"> 329 </div> 330 <y></y> 331 </div> 332 333 </fit> 334 335 </body> 336 </html>