repeat-auto-fill-008.html (13244B)
1 <!DOCTYPE HTML> 2 <html> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="match" href="repeat-auto-fill-008-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list"> 6 <head> 7 <style> 8 html,body { 9 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 10 } 11 12 .grid { 13 display: inline-grid; 14 grid-auto-columns: 15px; 15 border: 1px solid; 16 } 17 18 .subgrid { 19 display: grid; 20 grid-column: 3 / span 4; 21 grid-auto-rows: 8px; 22 background: grey; 23 } 24 25 .fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y] [y]) [z] [z] [z] [z] [z] } /* [z] [z] [z] [z] [z] */ 26 .fill-0b { grid-template-columns: subgrid [z] repeat(auto-fill, [z] [z] [z]) [z] } /* [z] [z] [z] [z] [z] */ 27 .fill-0c { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [y] [y]) [z] } /* [x] [y] [y] [y] [z] */ 28 .fill-0d { grid-template-columns: subgrid [x] repeat(auto-fill, [z] [z]) } /* [x] [z] [z] [z] [z] */ 29 .fill-0e { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] } /* [x] [x] [x] [x] [z] */ 30 .fill-0f { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] [z] [z] } /* [x] [x] [z] [z] [z] */ 31 .fill-0g { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */ 32 .fill-0h { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] } /* [x] [y] [x] [y] [z] */ 33 .fill-0i { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) } /* [x] [y] [x] [y] [] */ 34 .fill-0j { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] } /* [y] [y] [y] [z] [z] */ 35 .fill-0k { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] } /* [x] [y] [z] [z] [] */ 36 .fill-0l { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) [z] } /* [z] [x] [y] [z] [] */ 37 .fill-0m { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) } /* [z] [x] [y] [x] [y] */ 38 .fill-0n { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) repeat(100, [z])} /* [z] [z] [z] [z] [z] */ 39 .fill-0o { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) } /* [z] [x] [y] [z] [] */ 40 .fill-0p { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) [x] } /* [z] [x] [y] [z] [x] */ 41 .fill-0q { grid-template-columns: subgrid repeat(auto-fill, [x] [y] [z]) [x] } /* [x] [y] [z] [x] [] */ 42 .fill-0r { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [z]) } /* [x] [y] [z] [y] [z] */ 43 44 /* With span of 5... */ 45 .fill-0s { 46 grid-column: 2 / span 5; 47 grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] */ 48 } 49 50 /* With span of 6, same as fill-0s but with room for a partial additional repetition */ 51 .fill-0t { 52 grid-column: 1 / span 6; 53 grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] [] */ 54 } 55 56 .subgrid > :nth-child(2n) { background: black; } 57 .subgrid > :nth-child(2n+1) { background: pink; } 58 59 </style> 60 </head> 61 <body> 62 63 <div class="grid"><div class="subgrid fill-0a"> 64 <div style="grid-column:y 5"></div> 65 <div style="grid-column:y 4"></div> 66 <div style="grid-column:y 3"></div> 67 <div style="grid-column:y 2"></div> 68 <div style="grid-column:y 1"></div> 69 <div style="grid-column:y -1"></div> 70 <div style="grid-column:y -2"></div> 71 <div style="grid-column:y -3"></div> 72 <div style="grid-column:y -4"></div> 73 <div style="grid-column:y -5"></div> 74 </div></div> 75 76 <div class="grid"><div class="subgrid fill-0b"> 77 <div style="grid-column:y 5"></div> 78 <div style="grid-column:y 4"></div> 79 <div style="grid-column:y 3"></div> 80 <div style="grid-column:y 2"></div> 81 <div style="grid-column:y 1"></div> 82 <div style="grid-column:y -1"></div> 83 <div style="grid-column:y -2"></div> 84 <div style="grid-column:y -3"></div> 85 <div style="grid-column:y -4"></div> 86 <div style="grid-column:y -5"></div> 87 </div></div> 88 89 <div class="grid"><div class="subgrid fill-0c"> 90 <div style="grid-column:y 5"></div> 91 <div style="grid-column:y 4"></div> 92 <div style="grid-column:y 3"></div> 93 <div style="grid-column:y 2"></div> 94 <div style="grid-column:y 1"></div> 95 <div style="grid-column:y -1"></div> 96 <div style="grid-column:y -2"></div> 97 <div style="grid-column:y -3"></div> 98 <div style="grid-column:y -4"></div> 99 <div style="grid-column:y -5"></div> 100 </div></div> 101 102 <div class="grid"><div class="subgrid fill-0d"> 103 <div style="grid-column:y 5"></div> 104 <div style="grid-column:y 4"></div> 105 <div style="grid-column:y 3"></div> 106 <div style="grid-column:y 2"></div> 107 <div style="grid-column:y 1"></div> 108 <div style="grid-column:y -1"></div> 109 <div style="grid-column:y -2"></div> 110 <div style="grid-column:y -3"></div> 111 <div style="grid-column:y -4"></div> 112 <div style="grid-column:y -5"></div> 113 </div></div> 114 115 <div class="grid"><div class="subgrid fill-0e"> 116 <div style="grid-column:y 5"></div> 117 <div style="grid-column:y 4"></div> 118 <div style="grid-column:y 3"></div> 119 <div style="grid-column:y 2"></div> 120 <div style="grid-column:y 1"></div> 121 <div style="grid-column:y -1"></div> 122 <div style="grid-column:y -2"></div> 123 <div style="grid-column:y -3"></div> 124 <div style="grid-column:y -4"></div> 125 <div style="grid-column:y -5"></div> 126 </div></div> 127 128 <div class="grid"><div class="subgrid fill-0f"> 129 <div style="grid-column:y 5"></div> 130 <div style="grid-column:y 4"></div> 131 <div style="grid-column:y 3"></div> 132 <div style="grid-column:y 2"></div> 133 <div style="grid-column:y 1"></div> 134 <div style="grid-column:y -1"></div> 135 <div style="grid-column:y -2"></div> 136 <div style="grid-column:y -3"></div> 137 <div style="grid-column:y -4"></div> 138 <div style="grid-column:y -5"></div> 139 </div></div> 140 141 <div class="grid"><div class="subgrid fill-0g"> 142 <div style="grid-column:y 5"></div> 143 <div style="grid-column:y 4"></div> 144 <div style="grid-column:y 3"></div> 145 <div style="grid-column:y 2"></div> 146 <div style="grid-column:y 1"></div> 147 <div style="grid-column:y -1"></div> 148 <div style="grid-column:y -2"></div> 149 <div style="grid-column:y -3"></div> 150 <div style="grid-column:y -4"></div> 151 <div style="grid-column:y -5"></div> 152 </div></div> 153 154 <div class="grid"><div class="subgrid fill-0h"> 155 <div style="grid-column:y 5"></div> 156 <div style="grid-column:y 4"></div> 157 <div style="grid-column:y 3"></div> 158 <div style="grid-column:y 2"></div> 159 <div style="grid-column:y 1"></div> 160 <div style="grid-column:y -1"></div> 161 <div style="grid-column:y -2"></div> 162 <div style="grid-column:y -3"></div> 163 <div style="grid-column:y -4"></div> 164 <div style="grid-column:y -5"></div> 165 </div></div> 166 167 <div class="grid"><div class="subgrid fill-0i"> 168 <div style="grid-column:y 5"></div> 169 <div style="grid-column:y 4"></div> 170 <div style="grid-column:y 3"></div> 171 <div style="grid-column:y 2"></div> 172 <div style="grid-column:y 1"></div> 173 <div style="grid-column:y -1"></div> 174 <div style="grid-column:y -2"></div> 175 <div style="grid-column:y -3"></div> 176 <div style="grid-column:y -4"></div> 177 <div style="grid-column:y -5"></div> 178 </div></div> 179 180 <div class="grid"><div class="subgrid fill-0j"> 181 <div style="grid-column:y 5"></div> 182 <div style="grid-column:y 4"></div> 183 <div style="grid-column:y 3"></div> 184 <div style="grid-column:y 2"></div> 185 <div style="grid-column:y 1"></div> 186 <div style="grid-column:y -1"></div> 187 <div style="grid-column:y -2"></div> 188 <div style="grid-column:y -3"></div> 189 <div style="grid-column:y -4"></div> 190 <div style="grid-column:y -5"></div> 191 </div></div> 192 193 <div class="grid"><div class="subgrid fill-0k"> 194 <div style="grid-column:y 5"></div> 195 <div style="grid-column:y 4"></div> 196 <div style="grid-column:y 3"></div> 197 <div style="grid-column:y 2"></div> 198 <div style="grid-column:y 1"></div> 199 <div style="grid-column:y -1"></div> 200 <div style="grid-column:y -2"></div> 201 <div style="grid-column:y -3"></div> 202 <div style="grid-column:y -4"></div> 203 <div style="grid-column:y -5"></div> 204 </div></div> 205 206 <div class="grid"><div class="subgrid fill-0l"> 207 <div style="grid-column:y 5"></div> 208 <div style="grid-column:y 4"></div> 209 <div style="grid-column:y 3"></div> 210 <div style="grid-column:y 2"></div> 211 <div style="grid-column:y 1"></div> 212 <div style="grid-column:y -1"></div> 213 <div style="grid-column:y -2"></div> 214 <div style="grid-column:y -3"></div> 215 <div style="grid-column:y -4"></div> 216 <div style="grid-column:y -5"></div> 217 </div></div> 218 219 <div class="grid"><div class="subgrid fill-0m"> 220 <div style="grid-column:y 5"></div> 221 <div style="grid-column:y 4"></div> 222 <div style="grid-column:y 3"></div> 223 <div style="grid-column:y 2"></div> 224 <div style="grid-column:y 1"></div> 225 <div style="grid-column:y -1"></div> 226 <div style="grid-column:y -2"></div> 227 <div style="grid-column:y -3"></div> 228 <div style="grid-column:y -4"></div> 229 <div style="grid-column:y -5"></div> 230 </div></div> 231 232 <div class="grid"><div class="subgrid fill-0n"> 233 <div style="grid-column:y 5"></div> 234 <div style="grid-column:y 4"></div> 235 <div style="grid-column:y 3"></div> 236 <div style="grid-column:y 2"></div> 237 <div style="grid-column:y 1"></div> 238 <div style="grid-column:y -1"></div> 239 <div style="grid-column:y -2"></div> 240 <div style="grid-column:y -3"></div> 241 <div style="grid-column:y -4"></div> 242 <div style="grid-column:y -5"></div> 243 </div></div> 244 245 <div class="grid"><div class="subgrid fill-0o"> 246 <div style="grid-column:y 5"></div> 247 <div style="grid-column:y 4"></div> 248 <div style="grid-column:y 3"></div> 249 <div style="grid-column:y 2"></div> 250 <div style="grid-column:y 1"></div> 251 <div style="grid-column:y -1"></div> 252 <div style="grid-column:y -2"></div> 253 <div style="grid-column:y -3"></div> 254 <div style="grid-column:y -4"></div> 255 <div style="grid-column:y -5"></div> 256 </div></div> 257 258 <div class="grid"><div class="subgrid fill-0p"> 259 <div style="grid-column:y 5"></div> 260 <div style="grid-column:y 4"></div> 261 <div style="grid-column:y 3"></div> 262 <div style="grid-column:y 2"></div> 263 <div style="grid-column:y 1"></div> 264 <div style="grid-column:y -1"></div> 265 <div style="grid-column:y -2"></div> 266 <div style="grid-column:y -3"></div> 267 <div style="grid-column:y -4"></div> 268 <div style="grid-column:y -5"></div> 269 </div></div> 270 271 <div class="grid"><div class="subgrid fill-0q"> 272 <div style="grid-column:y 5"></div> 273 <div style="grid-column:y 4"></div> 274 <div style="grid-column:y 3"></div> 275 <div style="grid-column:y 2"></div> 276 <div style="grid-column:y 1"></div> 277 <div style="grid-column:y -1"></div> 278 <div style="grid-column:y -2"></div> 279 <div style="grid-column:y -3"></div> 280 <div style="grid-column:y -4"></div> 281 <div style="grid-column:y -5"></div> 282 </div></div> 283 284 <div class="grid"><div class="subgrid fill-0r"> 285 <div style="grid-column:y 5"></div> 286 <div style="grid-column:y 4"></div> 287 <div style="grid-column:y 3"></div> 288 <div style="grid-column:y 2"></div> 289 <div style="grid-column:y 1"></div> 290 <div style="grid-column:y -1"></div> 291 <div style="grid-column:y -2"></div> 292 <div style="grid-column:y -3"></div> 293 <div style="grid-column:y -4"></div> 294 <div style="grid-column:y -5"></div> 295 </div></div> 296 297 <div class="grid"><div class="subgrid fill-0s"> 298 <div style="grid-column:y 5"></div> 299 <div style="grid-column:y 4"></div> 300 <div style="grid-column:y 3"></div> 301 <div style="grid-column:y 2"></div> 302 <div style="grid-column:y 1"></div> 303 <div style="grid-column:y -1"></div> 304 <div style="grid-column:y -2"></div> 305 <div style="grid-column:y -3"></div> 306 <div style="grid-column:y -4"></div> 307 <div style="grid-column:y -5"></div> 308 </div></div> 309 310 <div class="grid"><div class="subgrid fill-0t"> 311 <div style="grid-column:y 5"></div> 312 <div style="grid-column:y 4"></div> 313 <div style="grid-column:y 3"></div> 314 <div style="grid-column:y 2"></div> 315 <div style="grid-column:y 1"></div> 316 <div style="grid-column:y -1"></div> 317 <div style="grid-column:y -2"></div> 318 <div style="grid-column:y -3"></div> 319 <div style="grid-column:y -4"></div> 320 <div style="grid-column:y -5"></div> 321 </div></div> 322 323 <script> 324 const expectedResults = [ 325 "subgrid [z] [z] [z] [z] [z]", 326 "subgrid [z] [z] [z] [z] [z]", 327 "subgrid [x] [y] [y] [y] [z]", 328 "subgrid [x] [z] [z] [z] [z]", 329 "subgrid [x] [x] [x] [x] [z]", 330 "subgrid [x] [x] [z] [z] [z]", 331 "subgrid [x] [y] [z] [z] []", 332 "subgrid [x] [y] [x] [y] [z]", 333 "subgrid [x] [y] [x] [y] []", 334 "subgrid [y] [y] [y] [z] [z]", 335 "subgrid [x] [y] [z] [z] []", 336 "subgrid [z] [x] [y] [z] []", 337 "subgrid [z] [x] [y] [x] [y]", 338 "subgrid [z] [z] [z] [z] [z]", 339 "subgrid [z] [x] [y] [z] []", 340 "subgrid [z] [x] [y] [z] [x]", 341 "subgrid [x] [y] [z] [x] []", 342 "subgrid [x] [y] [z] [y] [z]", 343 "subgrid [w] [y] [z] [y] [z] [x]", 344 "subgrid [w] [y] [z] [y] [z] [x] []", 345 ]; 346 [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) { 347 let actual = window.getComputedStyle(subgrid)['grid-template-columns']; 348 let expected = expectedResults[i]; 349 if (actual != expected) { 350 let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" + 351 " Actual: \"" + actual + "\", Expected: \"" + expected + "\""; 352 document.body.appendChild(document.createTextNode(err)); 353 document.body.appendChild(document.createElement("br")); 354 } 355 }); 356 </script> 357 358 </body>