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