grid-support-grid-auto-columns-rows-003.html (4402B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 6 'grid-auto-rows' properties with implicit tracks after and before the 7 explicit grid</title> 8 <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-tracks"> 9 <link rel="match" href="../reference/grid-support-grid-auto-columns-rows-003-ref.html"> 10 <style> 11 #wrapper { 12 display: grid; 13 grid-template-columns: 50px 50px 50px 50px; 14 } 15 16 /* Implicit and explicit grid track sizes */ 17 .grid { 18 display: grid; 19 grid-auto-rows: 2px 3px; 20 grid-auto-columns: 2px 3px; 21 } 22 #one .grid { grid-template: 5px / 5px; } 23 #two .grid { grid-template: 5px 5px / 5px 5px; } 24 #three .grid { grid-template: 5px 5px 5px / 5px 5px 5px; } 25 26 /* Grid item positions. */ 27 .item-left1 { grid-area: auto / auto / 1 / 1; } 28 .item-explicit { grid-area: 1 / 1 / -1 / -1; } 29 .item-right1 { grid-area: -1 / -1; } 30 31 #zero .item-left3 { grid-area: auto / auto / -3 / -3; } 32 #zero .item-left2 { grid-area: auto / auto / -2 / -2; } 33 #zero .item-right2 { grid-area: 2 / 2; } 34 #zero .item-right3 { grid-area: 3 / 3; } 35 #one .item-left3 { grid-area: auto / auto / -4 / -4; } 36 #one .item-left2 { grid-area: auto / auto / -3 / -3; } 37 #one .item-right2 { grid-area: 3 / 3; } 38 #one .item-right3 { grid-area: 4 / 4; } 39 #two .item-left3 { grid-area: auto / auto / -5 / -5; } 40 #two .item-left2 { grid-area: auto / auto / -4 / -4; } 41 #two .item-right2 { grid-area: 4 / 4; } 42 #two .item-right3 { grid-area: 5 / 5; } 43 #three .item-left3 { grid-area: auto / auto / -6 / -6; } 44 #three .item-left2 { grid-area: auto / auto / -5 / -5; } 45 #three .item-right2 { grid-area: 5 / 5; } 46 #three .item-right3 { grid-area: 6 / 6; } 47 48 /* Colors */ 49 .item-left3 { background: #ff0; } 50 .item-left2 { background: #ff0; } 51 .item-left1 { background: #ff0; } 52 .item-explicit { background: #f0f; } 53 .item-right1 { background: #0ff; } 54 .item-right2 { background: #0ff; } 55 .item-right3 { background: #0ff; } 56 </style> 57 <script> 58 function createDivWithClass(className, parent) { 59 let element = document.createElement('div'); 60 element.className = className || ''; 61 if (!parent) { 62 parent = document.body; 63 } 64 parent.appendChild(element); 65 return element; 66 } 67 68 function generate(parentId) { 69 let parent = document.getElementById(parentId); 70 71 for (let leftNum = 0; leftNum <= 3; ++leftNum) { 72 for (let rightNum = 0; rightNum <= 3; ++rightNum) { 73 let grid = leftNum + rightNum > 0 74 ? createDivWithClass("grid", parent) 75 : null; 76 77 for (let i = 1; i <= leftNum; ++i) { 78 createDivWithClass("item-left" + i, grid); 79 } 80 81 if (leftNum + rightNum > 0) { 82 createDivWithClass("item-explicit", grid); 83 } 84 85 for (let i = 1; i <= rightNum; ++i) { 86 createDivWithClass("item-right" + i, grid); 87 } 88 } 89 } 90 } 91 92 function run() { 93 // This is equal to something like this: 94 // <div class="grid"> 95 // <div class="item-left3"></div> 96 // <div class="item-left2"></div> 97 // <div class="item-left1"></div> 98 // <div class="item-explicit"></div> 99 // <div class="item-right1"></div> 100 // <div class="item-right2"></div> 101 // <div class="item-right3"></div> 102 // </div> 103 // Generate the grid examples with 0~3 left items and 0~3 right items. 104 // The item-explicit is placed inside the 0x0 ~ 3x3 explicit tracks. 105 generate("zero"); 106 generate("one"); 107 generate("two"); 108 generate("three"); 109 110 document.documentElement.offsetHeight; 111 document.documentElement.classList.remove('reftest-wait'); 112 } 113 </script> 114 </head> 115 <body onload="run()"> 116 <div id="wrapper"> 117 <!-- Zero explicit track --> 118 <div id="zero"></div> 119 120 <!-- One explicit track --> 121 <div id="one"></div> 122 123 <!-- Two explicit tracks --> 124 <div id="two"></div> 125 126 <!-- Three explicit tracks --> 127 <div id="three"></div> 128 </div> 129 </body> 130 </html>