repeat-auto-fill-004-ref.html (12613B)
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: repeat(auto-fill, line-names) in RTL/LTR subgrids</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid { 16 display: inline-grid; 17 grid-auto-columns: 15px; 18 border: 1px solid; 19 } 20 21 .subgrid { 22 display: grid; 23 grid-template-columns: subgrid; 24 grid-column: 3 / span 4; 25 grid-auto-rows: 8px; 26 background: grey; 27 } 28 29 .subgrid > :nth-child(2n) { background: black; } 30 .subgrid > :nth-child(2n+1) { background: pink; } 31 32 </style> 33 </head> 34 <body> 35 36 <div class="grid"><div class="subgrid fill-0a"> 37 <div style="grid-column:4"></div> 38 <div style="grid-column:4"></div> 39 <div style="grid-column:4"></div> 40 <div style="grid-column:4"></div> 41 <div style="grid-column:4"></div> 42 <div style="grid-column:1"></div> 43 <div style="grid-column:1"></div> 44 <div style="grid-column:1"></div> 45 <div style="grid-column:1"></div> 46 <div style="grid-column:1"></div> 47 </div></div> 48 49 <div class="grid"><div class="subgrid fill-0b"> 50 <div style="grid-column:4"></div> 51 <div style="grid-column:4"></div> 52 <div style="grid-column:4"></div> 53 <div style="grid-column:4"></div> 54 <div style="grid-column:4"></div> 55 <div style="grid-column:1"></div> 56 <div style="grid-column:1"></div> 57 <div style="grid-column:1"></div> 58 <div style="grid-column:1"></div> 59 <div style="grid-column:1"></div> 60 </div></div> 61 62 <div class="grid"><div class="subgrid fill-0c"> 63 <div style="grid-column:4"></div> 64 <div style="grid-column:4"></div> 65 <div style="grid-column:4"></div> 66 <div style="grid-column:4"></div> 67 <div style="grid-column:4"></div> 68 <div style="grid-column:1"></div> 69 <div style="grid-column:1"></div> 70 <div style="grid-column:1"></div> 71 <div style="grid-column:1"></div> 72 <div style="grid-column:1"></div> 73 </div></div> 74 75 <div class="grid"><div class="subgrid fill-0d"> 76 <div style="grid-column:4"></div> 77 <div style="grid-column:4"></div> 78 <div style="grid-column:4"></div> 79 <div style="grid-column:4"></div> 80 <div style="grid-column:4"></div> 81 <div style="grid-column:1"></div> 82 <div style="grid-column:1"></div> 83 <div style="grid-column:1"></div> 84 <div style="grid-column:1"></div> 85 <div style="grid-column:1"></div> 86 </div></div> 87 88 <div class="grid"><div class="subgrid fill-0e"> 89 <div style="grid-column:4"></div> 90 <div style="grid-column:4"></div> 91 <div style="grid-column:4"></div> 92 <div style="grid-column:4"></div> 93 <div style="grid-column:4"></div> 94 <div style="grid-column:1"></div> 95 <div style="grid-column:1"></div> 96 <div style="grid-column:1"></div> 97 <div style="grid-column:1"></div> 98 <div style="grid-column:1"></div> 99 </div></div> 100 101 <div class="grid"><div class="subgrid fill-0f"> 102 <div style="grid-column:4"></div> 103 <div style="grid-column:4"></div> 104 <div style="grid-column:4"></div> 105 <div style="grid-column:4"></div> 106 <div style="grid-column:4"></div> 107 <div style="grid-column:1"></div> 108 <div style="grid-column:1"></div> 109 <div style="grid-column:1"></div> 110 <div style="grid-column:1"></div> 111 <div style="grid-column:1"></div> 112 </div></div> 113 114 <div class="grid"><div class="subgrid fill-0g"> 115 <div style="grid-column:4"></div> 116 <div style="grid-column:4"></div> 117 <div style="grid-column:4"></div> 118 <div style="grid-column:4"></div> 119 <div style="grid-column:4"></div> 120 <div style="grid-column:1"></div> 121 <div style="grid-column:1"></div> 122 <div style="grid-column:1"></div> 123 <div style="grid-column:1"></div> 124 <div style="grid-column:1"></div> 125 </div></div> 126 127 <div class="grid"><div class="subgrid fill-0h"> 128 <div style="grid-column:4"></div> 129 <div style="grid-column:4"></div> 130 <div style="grid-column:4"></div> 131 <div style="grid-column:4"></div> 132 <div style="grid-column:4"></div> 133 <div style="grid-column:1"></div> 134 <div style="grid-column:1"></div> 135 <div style="grid-column:1"></div> 136 <div style="grid-column:1"></div> 137 <div style="grid-column:1"></div> 138 </div></div> 139 140 <div class="grid"><div class="subgrid fill-0i"> 141 <div style="grid-column:4"></div> 142 <div style="grid-column:4"></div> 143 <div style="grid-column:4"></div> 144 <div style="grid-column:4"></div> 145 <div style="grid-column:4"></div> 146 <div style="grid-column:1"></div> 147 <div style="grid-column:1"></div> 148 <div style="grid-column:1"></div> 149 <div style="grid-column:1"></div> 150 <div style="grid-column:1"></div> 151 </div></div> 152 153 <div class="grid"><div class="subgrid fill-0j"> 154 <div style="grid-column:4"></div> 155 <div style="grid-column:4"></div> 156 <div style="grid-column:4"></div> 157 <div style="grid-column:4"></div> 158 <div style="grid-column:4"></div> 159 <div style="grid-column:1"></div> 160 <div style="grid-column:1"></div> 161 <div style="grid-column:1"></div> 162 <div style="grid-column:1"></div> 163 <div style="grid-column:1"></div> 164 </div></div> 165 166 <div class="grid"><div class="subgrid fill-0k"> 167 <div style="grid-column:4"></div> 168 <div style="grid-column:4"></div> 169 <div style="grid-column:4"></div> 170 <div style="grid-column:4"></div> 171 <div style="grid-column:4"></div> 172 <div style="grid-column:1"></div> 173 <div style="grid-column:1"></div> 174 <div style="grid-column:1"></div> 175 <div style="grid-column:1"></div> 176 <div style="grid-column:1"></div> 177 </div></div> 178 179 <div class="grid"><div class="subgrid fill-0l"> 180 <div style="grid-column:4"></div> 181 <div style="grid-column:4"></div> 182 <div style="grid-column:4"></div> 183 <div style="grid-column:4"></div> 184 <div style="grid-column:4"></div> 185 <div style="grid-column:1"></div> 186 <div style="grid-column:1"></div> 187 <div style="grid-column:1"></div> 188 <div style="grid-column:1"></div> 189 <div style="grid-column:1"></div> 190 </div></div> 191 192 <div class="grid"><div class="subgrid fill-0m"> 193 <div style="grid-column:4"></div> 194 <div style="grid-column:4"></div> 195 <div style="grid-column:4"></div> 196 <div style="grid-column:4"></div> 197 <div style="grid-column:4"></div> 198 <div style="grid-column:1"></div> 199 <div style="grid-column:1"></div> 200 <div style="grid-column:1"></div> 201 <div style="grid-column:1"></div> 202 <div style="grid-column:1"></div> 203 </div></div> 204 205 <div class="grid"><div class="subgrid fill-1a"> 206 <div style="grid-column:4"></div> 207 <div style="grid-column:4"></div> 208 <div style="grid-column:4"></div> 209 <div style="grid-column:4"></div> 210 <div style="grid-column:4"></div> 211 <div style="grid-column:4"></div> 212 <div style="grid-column:1"></div> 213 <div style="grid-column:1"></div> 214 <div style="grid-column:1"></div> 215 <div style="grid-column:1"></div> 216 </div></div> 217 218 <div class="grid"><div class="subgrid fill-1b"> 219 <div style="grid-column:4"></div> 220 <div style="grid-column:4"></div> 221 <div style="grid-column:4"></div> 222 <div style="grid-column:4"></div> 223 <div style="grid-column:4"></div> 224 <div style="grid-column:4"></div> 225 <div style="grid-column:1"></div> 226 <div style="grid-column:1"></div> 227 <div style="grid-column:1"></div> 228 <div style="grid-column:1"></div> 229 </div></div> 230 231 <div class="grid"><div class="subgrid fill-1c"> 232 <div style="grid-column:4"></div> 233 <div style="grid-column:4"></div> 234 <div style="grid-column:4"></div> 235 <div style="grid-column:4"></div> 236 <div style="grid-column:3"></div> 237 <div style="grid-column:3"></div> 238 <div style="grid-column:1"></div> 239 <div style="grid-column:1"></div> 240 <div style="grid-column:1"></div> 241 <div style="grid-column:1"></div> 242 </div></div> 243 244 <div class="grid"><div class="subgrid fill-1d"> 245 <div style="grid-column:4"></div> 246 <div style="grid-column:4"></div> 247 <div style="grid-column:4"></div> 248 <div style="grid-column:4"></div> 249 <div style="grid-column:2"></div> 250 <div style="grid-column:2"></div> 251 <div style="grid-column:1"></div> 252 <div style="grid-column:1"></div> 253 <div style="grid-column:1"></div> 254 <div style="grid-column:1"></div> 255 </div></div> 256 257 <div class="grid"><div class="subgrid fill-1e"> 258 <div style="grid-column:4"></div> 259 <div style="grid-column:4"></div> 260 <div style="grid-column:4"></div> 261 <div style="grid-column:4"></div> 262 <div style="grid-column:1"></div> 263 <div style="grid-column:1"></div> 264 <div style="grid-column:1"></div> 265 <div style="grid-column:1"></div> 266 <div style="grid-column:1"></div> 267 <div style="grid-column:1"></div> 268 </div></div> 269 270 <div class="grid"><div class="subgrid fill-2a"> 271 <div style="grid-column:4"></div> 272 <div style="grid-column:4"></div> 273 <div style="grid-column:4"></div> 274 <div style="grid-column:4"></div> 275 <div style="grid-column:4"></div> 276 <div style="grid-column:4"></div> 277 <div style="grid-column:4"></div> 278 <div style="grid-column:1"></div> 279 <div style="grid-column:1"></div> 280 <div style="grid-column:1"></div> 281 </div></div> 282 283 <div class="grid"><div class="subgrid fill-2b"> 284 <div style="grid-column:4"></div> 285 <div style="grid-column:4"></div> 286 <div style="grid-column:4"></div> 287 <div style="grid-column:4"></div> 288 <div style="grid-column:3"></div> 289 <div style="grid-column:4"></div> 290 <div style="grid-column:3"></div> 291 <div style="grid-column:1"></div> 292 <div style="grid-column:1"></div> 293 <div style="grid-column:1"></div> 294 </div></div> 295 296 <div class="grid"><div class="subgrid fill-2c"> 297 <div style="grid-column:4"></div> 298 <div style="grid-column:4"></div> 299 <div style="grid-column:4"></div> 300 <div style="grid-column:3"></div> 301 <div style="grid-column:2"></div> 302 <div style="grid-column:3"></div> 303 <div style="grid-column:2"></div> 304 <div style="grid-column:1"></div> 305 <div style="grid-column:1"></div> 306 <div style="grid-column:1"></div> 307 </div></div> 308 309 <div class="grid"><div class="subgrid fill-2d"> 310 <div style="grid-column:4"></div> 311 <div style="grid-column:4"></div> 312 <div style="grid-column:4"></div> 313 <div style="grid-column:2"></div> 314 <div style="grid-column:1"></div> 315 <div style="grid-column:2"></div> 316 <div style="grid-column:1"></div> 317 <div style="grid-column:1"></div> 318 <div style="grid-column:1"></div> 319 <div style="grid-column:1"></div> 320 </div></div> 321 322 <div class="grid"><div class="subgrid fill-3a"> 323 <div style="grid-column:4"></div> 324 <div style="grid-column:4"></div> 325 <div style="grid-column:4"></div> 326 <div style="grid-column:4"></div> 327 <div style="grid-column:3"></div> 328 <div style="grid-column:4"></div> 329 <div style="grid-column:4"></div> 330 <div style="grid-column:3"></div> 331 <div style="grid-column:1"></div> 332 <div style="grid-column:1"></div> 333 </div></div> 334 335 <div class="grid"><div class="subgrid fill-3b"> 336 <div style="grid-column:4"></div> 337 <div style="grid-column:4"></div> 338 <div style="grid-column:4"></div> 339 <div style="grid-column:3"></div> 340 <div style="grid-column:2"></div> 341 <div style="grid-column:4"></div> 342 <div style="grid-column:3"></div> 343 <div style="grid-column:2"></div> 344 <div style="grid-column:1"></div> 345 <div style="grid-column:1"></div> 346 </div></div> 347 348 <div class="grid"><div class="subgrid fill-3c"> 349 <div style="grid-column:4"></div> 350 <div style="grid-column:4"></div> 351 <div style="grid-column:3"></div> 352 <div style="grid-column:2"></div> 353 <div style="grid-column:1"></div> 354 <div style="grid-column:3"></div> 355 <div style="grid-column:2"></div> 356 <div style="grid-column:1"></div> 357 <div style="grid-column:1"></div> 358 <div style="grid-column:1"></div> 359 </div></div> 360 361 <div class="grid"><div class="subgrid fill-4a"> 362 <div style="grid-column:4"></div> 363 <div style="grid-column:4"></div> 364 <div style="grid-column:4"></div> 365 <div style="grid-column:3"></div> 366 <div style="grid-column:2"></div> 367 <div style="grid-column:4"></div> 368 <div style="grid-column:4"></div> 369 <div style="grid-column:3"></div> 370 <div style="grid-column:2"></div> 371 <div style="grid-column:1"></div> 372 </div></div> 373 374 <div class="grid"><div class="subgrid fill-4b"> 375 <div style="grid-column:4"></div> 376 <div style="grid-column:4"></div> 377 <div style="grid-column:3"></div> 378 <div style="grid-column:2"></div> 379 <div style="grid-column:1"></div> 380 <div style="grid-column:4"></div> 381 <div style="grid-column:3"></div> 382 <div style="grid-column:2"></div> 383 <div style="grid-column:1"></div> 384 <div style="grid-column:1"></div> 385 </div></div> 386 387 <div class="grid"><div class="subgrid fill-5"> 388 <div style="grid-column:4"></div> 389 <div style="grid-column:4"></div> 390 <div style="grid-column:3"></div> 391 <div style="grid-column:2"></div> 392 <div style="grid-column:1"></div> 393 <div style="grid-column:4"></div> 394 <div style="grid-column:4"></div> 395 <div style="grid-column:3"></div> 396 <div style="grid-column:2"></div> 397 <div style="grid-column:1"></div> 398 </div></div> 399 400 </body> 401 </html>