grid-support-grid-auto-columns-rows-003-ref.html (16562B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test Reference: Support for 'grid-auto-columns' and 6 'grid-auto-rows' properties with implicit tracks after and before the 7 explicit grid</title> 8 <style> 9 #wrapper { 10 display: grid; 11 grid-template-columns: 50px 50px 50px 50px; 12 } 13 14 div { position: relative; } 15 16 .item-left3 { 17 width: 3px; 18 height: 3px; 19 background: #ff0; 20 } 21 .item-left2 { 22 width: 2px; 23 height: 2px; 24 background: #ff0; 25 } 26 .item-left1 { 27 width: 3px; 28 height: 3px; 29 background: #ff0; 30 } 31 .item-explicit { 32 width: 5px; 33 height: 5px; 34 background: #f0f; 35 } 36 .item-right1 { 37 width: 2px; 38 height: 2px; 39 background: #0ff; 40 } 41 .item-right2 { 42 width: 3px; 43 height: 3px; 44 background: #0ff; 45 } 46 .item-right3 { 47 width: 2px; 48 height: 2px; 49 background: #0ff; 50 } 51 52 #zero .item-explicit { 53 width: 2px; 54 height: 2px; 55 } 56 #two .item-explicit { 57 width: 10px; 58 height: 10px; 59 } 60 #three .item-explicit { 61 width: 15px; 62 height: 15px; 63 } 64 </style> 65 </head> 66 <body> 67 <div id="wrapper"> 68 <div id="zero"> 69 <div> 70 <div class="item-right1"></div> 71 </div> 72 <div> 73 <div class="item-right1"></div> 74 <div class="item-right2" style="left:2px;"></div> 75 </div> 76 <div> 77 <div class="item-right1"></div> 78 <div class="item-right2" style="left:2px;"></div> 79 <div class="item-right3" style="left:5px;"></div> 80 </div> 81 82 <div> 83 <div class="item-left1"></div> 84 <div class="item-explicit" style="left:3px;"></div> 85 </div> 86 <div> 87 <div class="item-left1"></div> 88 <div class="item-right1" style="left:3px;"></div> 89 </div> 90 <div> 91 <div class="item-left1"></div> 92 <div class="item-right1" style="left:3px;"></div> 93 <div class="item-right2" style="left:5px;"></div> 94 </div> 95 <div> 96 <div class="item-left1"></div> 97 <div class="item-right1" style="left:3px;"></div> 98 <div class="item-right2" style="left:5px;"></div> 99 <div class="item-right3" style="left:8px;"></div> 100 </div> 101 102 <div> 103 <div class="item-left2"></div> 104 <div class="item-left1" style="left:2px;"></div> 105 <div class="item-explicit" style="left:5px;"></div> 106 </div> 107 <div> 108 <div class="item-left2"></div> 109 <div class="item-left1" style="left:2px;"></div> 110 <div class="item-right1" style="left:5px;"></div> 111 </div> 112 <div> 113 <div class="item-left2"></div> 114 <div class="item-left1" style="left:2px;"></div> 115 <div class="item-right1" style="left:5px;"></div> 116 <div class="item-right2" style="left:7px;"></div> 117 </div> 118 <div> 119 <div class="item-left2"></div> 120 <div class="item-left1" style="left:2px;"></div> 121 <div class="item-right1" style="left:5px;"></div> 122 <div class="item-right2" style="left:7px;"></div> 123 <div class="item-right3" style="left:10px;"></div> 124 </div> 125 126 <div> 127 <div class="item-left3"></div> 128 <div class="item-left2" style="left:3px;"></div> 129 <div class="item-left1" style="left:5px;"></div> 130 <div class="item-explicit" style="left:8px;"></div> 131 </div> 132 <div> 133 <div class="item-left3"></div> 134 <div class="item-left2" style="left:3px;"></div> 135 <div class="item-left1" style="left:5px;"></div> 136 <div class="item-right1" style="left:8px;"></div> 137 </div> 138 <div> 139 <div class="item-left3"></div> 140 <div class="item-left2" style="left:3px;"></div> 141 <div class="item-left1" style="left:5px;"></div> 142 <div class="item-right1" style="left:8px;"></div> 143 <div class="item-right2" style="left:10px;"></div> 144 </div> 145 <div> 146 <div class="item-left3"></div> 147 <div class="item-left2" style="left:3px;"></div> 148 <div class="item-left1" style="left:5px;"></div> 149 <div class="item-right1" style="left:8px;"></div> 150 <div class="item-right2" style="left:10px;"></div> 151 <div class="item-right3" style="left:13px;"></div> 152 </div> 153 </div> 154 155 <div id="one"> 156 <div> 157 <div class="item-explicit"></div> 158 <div class="item-right1" style="left:5px;"></div> 159 </div> 160 <div> 161 <div class="item-explicit"></div> 162 <div class="item-right1" style="left:5px;"></div> 163 <div class="item-right2" style="left:7px;"></div> 164 </div> 165 <div> 166 <div class="item-explicit"></div> 167 <div class="item-right1" style="left:5px;"></div> 168 <div class="item-right2" style="left:7px;"></div> 169 <div class="item-right3" style="left:10px;"></div> 170 </div> 171 172 <div> 173 <div class="item-left1"></div> 174 <div class="item-explicit" style="left:3px;"></div> 175 </div> 176 <div> 177 <div class="item-left1"></div> 178 <div class="item-explicit" style="left:3px;"></div> 179 <div class="item-right1" style="left:8px;"></div> 180 </div> 181 <div> 182 <div class="item-left1"></div> 183 <div class="item-explicit" style="left:3px;"></div> 184 <div class="item-right1" style="left:8px;"></div> 185 <div class="item-right2" style="left:10px;"></div> 186 </div> 187 <div> 188 <div class="item-left1"></div> 189 <div class="item-explicit" style="left:3px;"></div> 190 <div class="item-right1" style="left:8px;"></div> 191 <div class="item-right2" style="left:10px;"></div> 192 <div class="item-right3" style="left:13px;"></div> 193 </div> 194 195 <div> 196 <div class="item-left2"></div> 197 <div class="item-left1" style="left:2px;"></div> 198 <div class="item-explicit" style="left:5px;"></div> 199 </div> 200 <div> 201 <div class="item-left2"></div> 202 <div class="item-left1" style="left:2px;"></div> 203 <div class="item-explicit" style="left:5px;"></div> 204 <div class="item-right1" style="left:10px;"></div> 205 </div> 206 <div> 207 <div class="item-left2"></div> 208 <div class="item-left1" style="left:2px;"></div> 209 <div class="item-explicit" style="left:5px;"></div> 210 <div class="item-right1" style="left:10px;"></div> 211 <div class="item-right2" style="left:12px;"></div> 212 </div> 213 <div> 214 <div class="item-left2"></div> 215 <div class="item-left1" style="left:2px;"></div> 216 <div class="item-explicit" style="left:5px;"></div> 217 <div class="item-right1" style="left:10px;"></div> 218 <div class="item-right2" style="left:12px;"></div> 219 <div class="item-right3" style="left:15px;"></div> 220 </div> 221 222 <div> 223 <div class="item-left3"></div> 224 <div class="item-left2" style="left:3px;"></div> 225 <div class="item-left1" style="left:5px;"></div> 226 <div class="item-explicit" style="left:8px;"></div> 227 </div> 228 <div> 229 <div class="item-left3"></div> 230 <div class="item-left2" style="left:3px;"></div> 231 <div class="item-left1" style="left:5px;"></div> 232 <div class="item-explicit" style="left:8px;"></div> 233 <div class="item-right1" style="left:13px;"></div> 234 </div> 235 <div> 236 <div class="item-left3"></div> 237 <div class="item-left2" style="left:3px;"></div> 238 <div class="item-left1" style="left:5px;"></div> 239 <div class="item-explicit" style="left:8px;"></div> 240 <div class="item-right1" style="left:13px;"></div> 241 <div class="item-right2" style="left:15px;"></div> 242 </div> 243 <div> 244 <div class="item-left3"></div> 245 <div class="item-left2" style="left:3px;"></div> 246 <div class="item-left1" style="left:5px;"></div> 247 <div class="item-explicit" style="left:8px;"></div> 248 <div class="item-right1" style="left:13px;"></div> 249 <div class="item-right2" style="left:15px;"></div> 250 <div class="item-right3" style="left:18px;"></div> 251 </div> 252 </div> 253 254 <div id="two"> 255 <div> 256 <div class="item-explicit"></div> 257 <div class="item-right1" style="left:10px;"></div> 258 </div> 259 <div> 260 <div class="item-explicit"></div> 261 <div class="item-right1" style="left:10px;"></div> 262 <div class="item-right2" style="left:12px;"></div> 263 </div> 264 <div> 265 <div class="item-explicit"></div> 266 <div class="item-right1" style="left:10px;"></div> 267 <div class="item-right2" style="left:12px;"></div> 268 <div class="item-right3" style="left:15px;"></div> 269 </div> 270 271 <div> 272 <div class="item-left1"></div> 273 <div class="item-explicit" style="left:3px;"></div> 274 </div> 275 <div> 276 <div class="item-left1"></div> 277 <div class="item-explicit" style="left:3px;"></div> 278 <div class="item-right1" style="left:13px;"></div> 279 </div> 280 <div> 281 <div class="item-left1"></div> 282 <div class="item-explicit" style="left:3px;"></div> 283 <div class="item-right1" style="left:13px;"></div> 284 <div class="item-right2" style="left:15px;"></div> 285 </div> 286 <div> 287 <div class="item-left1"></div> 288 <div class="item-explicit" style="left:3px;"></div> 289 <div class="item-right1" style="left:13px;"></div> 290 <div class="item-right2" style="left:15px;"></div> 291 <div class="item-right3" style="left:18px;"></div> 292 </div> 293 294 <div> 295 <div class="item-left2"></div> 296 <div class="item-left1" style="left:2px;"></div> 297 <div class="item-explicit" style="left:5px;"></div> 298 </div> 299 <div> 300 <div class="item-left2"></div> 301 <div class="item-left1" style="left:2px;"></div> 302 <div class="item-explicit" style="left:5px;"></div> 303 <div class="item-right1" style="left:15px;"></div> 304 </div> 305 <div> 306 <div class="item-left2"></div> 307 <div class="item-left1" style="left:2px;"></div> 308 <div class="item-explicit" style="left:5px;"></div> 309 <div class="item-right1" style="left:15px;"></div> 310 <div class="item-right2" style="left:17px;"></div> 311 </div> 312 <div> 313 <div class="item-left2"></div> 314 <div class="item-left1" style="left:2px;"></div> 315 <div class="item-explicit" style="left:5px;"></div> 316 <div class="item-right1" style="left:15px;"></div> 317 <div class="item-right2" style="left:17px;"></div> 318 <div class="item-right3" style="left:20px;"></div> 319 </div> 320 321 <div> 322 <div class="item-left3"></div> 323 <div class="item-left2" style="left:3px;"></div> 324 <div class="item-left1" style="left:5px;"></div> 325 <div class="item-explicit" style="left:8px;"></div> 326 </div> 327 <div> 328 <div class="item-left3"></div> 329 <div class="item-left2" style="left:3px;"></div> 330 <div class="item-left1" style="left:5px;"></div> 331 <div class="item-explicit" style="left:8px;"></div> 332 <div class="item-right1" style="left:18px;"></div> 333 </div> 334 <div> 335 <div class="item-left3"></div> 336 <div class="item-left2" style="left:3px;"></div> 337 <div class="item-left1" style="left:5px;"></div> 338 <div class="item-explicit" style="left:8px;"></div> 339 <div class="item-right1" style="left:18px;"></div> 340 <div class="item-right2" style="left:20px;"></div> 341 </div> 342 <div> 343 <div class="item-left3"></div> 344 <div class="item-left2" style="left:3px;"></div> 345 <div class="item-left1" style="left:5px;"></div> 346 <div class="item-explicit" style="left:8px;"></div> 347 <div class="item-right1" style="left:18px;"></div> 348 <div class="item-right2" style="left:20px;"></div> 349 <div class="item-right3" style="left:23px;"></div> 350 </div> 351 </div> 352 353 <div id="three"> 354 <div> 355 <div class="item-explicit"></div> 356 <div class="item-right1" style="left:15px;"></div> 357 </div> 358 <div> 359 <div class="item-explicit"></div> 360 <div class="item-right1" style="left:15px;"></div> 361 <div class="item-right2" style="left:17px;"></div> 362 </div> 363 <div> 364 <div class="item-explicit"></div> 365 <div class="item-right1" style="left:15px;"></div> 366 <div class="item-right2" style="left:17px;"></div> 367 <div class="item-right3" style="left:20px;"></div> 368 </div> 369 370 <div> 371 <div class="item-left1"></div> 372 <div class="item-explicit" style="left:3px;"></div> 373 </div> 374 <div> 375 <div class="item-left1"></div> 376 <div class="item-explicit" style="left:3px;"></div> 377 <div class="item-right1" style="left:18px;"></div> 378 </div> 379 <div> 380 <div class="item-left1"></div> 381 <div class="item-explicit" style="left:3px;"></div> 382 <div class="item-right1" style="left:18px;"></div> 383 <div class="item-right2" style="left:20px;"></div> 384 </div> 385 <div> 386 <div class="item-left1"></div> 387 <div class="item-explicit" style="left:3px;"></div> 388 <div class="item-right1" style="left:18px;"></div> 389 <div class="item-right2" style="left:20px;"></div> 390 <div class="item-right3" style="left:23px;"></div> 391 </div> 392 393 <div> 394 <div class="item-left2"></div> 395 <div class="item-left1" style="left:2px;"></div> 396 <div class="item-explicit" style="left:5px;"></div> 397 </div> 398 <div> 399 <div class="item-left2"></div> 400 <div class="item-left1" style="left:2px;"></div> 401 <div class="item-explicit" style="left:5px;"></div> 402 <div class="item-right1" style="left:20px;"></div> 403 </div> 404 <div> 405 <div class="item-left2"></div> 406 <div class="item-left1" style="left:2px;"></div> 407 <div class="item-explicit" style="left:5px;"></div> 408 <div class="item-right1" style="left:20px;"></div> 409 <div class="item-right2" style="left:22px;"></div> 410 </div> 411 <div> 412 <div class="item-left2"></div> 413 <div class="item-left1" style="left:2px;"></div> 414 <div class="item-explicit" style="left:5px;"></div> 415 <div class="item-right1" style="left:20px;"></div> 416 <div class="item-right2" style="left:22px;"></div> 417 <div class="item-right3" style="left:25px;"></div> 418 </div> 419 420 <div> 421 <div class="item-left3"></div> 422 <div class="item-left2" style="left:3px;"></div> 423 <div class="item-left1" style="left:5px;"></div> 424 <div class="item-explicit" style="left:8px;"></div> 425 </div> 426 <div> 427 <div class="item-left3"></div> 428 <div class="item-left2" style="left:3px;"></div> 429 <div class="item-left1" style="left:5px;"></div> 430 <div class="item-explicit" style="left:8px;"></div> 431 <div class="item-right1" style="left:23px;"></div> 432 </div> 433 <div> 434 <div class="item-left3"></div> 435 <div class="item-left2" style="left:3px;"></div> 436 <div class="item-left1" style="left:5px;"></div> 437 <div class="item-explicit" style="left:8px;"></div> 438 <div class="item-right1" style="left:23px;"></div> 439 <div class="item-right2" style="left:25px;"></div> 440 </div> 441 <div> 442 <div class="item-left3"></div> 443 <div class="item-left2" style="left:3px;"></div> 444 <div class="item-left1" style="left:5px;"></div> 445 <div class="item-explicit" style="left:8px;"></div> 446 <div class="item-right1" style="left:23px;"></div> 447 <div class="item-right2" style="left:25px;"></div> 448 <div class="item-right3" style="left:28px;"></div> 449 </div> 450 </div> 451 </div> 452 </body> 453 </html>