grid-support-named-grid-lines-003-ref.html (5818B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Mozilla" href="https://mozilla.org"> 4 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> 5 <link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> 6 <style> 7 8 .holder { 9 width: 300px; 10 height: 20px; 11 border-bottom: 2px solid #cfbfcf; 12 } 13 14 .holder > :nth-child(2) { 15 clear: left; /* Forces the div to a new line to simulate a new grid row. */ 16 padding-top: 2px; /* Simulates the grid row gap. */ 17 } 18 19 .grid-container > * { float: left; height: 8px; } 20 21 .grid-container > :nth-child(3n) { background: sienna; } 22 .grid-container > :nth-child(3n+1) { background: gold; } 23 .grid-container > :nth-child(3n+2) { background: orange; } 24 25 .alt-color > :nth-child(2n) { background: sienna; } 26 .alt-color > :nth-child(2n+1) { background: orange; } 27 28 .invis { width: 0px; visibility: none; } 29 30 </style> 31 32 <p>The test passes if it has the same visual effect as reference.</p> 33 34 <div class="holder"> 35 <div class="grid-container"> 36 <div style="width:30px; margin-left:30px"></div> 37 <div style="width:30px;"></div> 38 <div style="width:40px;"></div> 39 <div style="width:50px;"></div> 40 <div style="width:60px;"></div> 41 </div> 42 </div> 43 44 <div class="holder"> 45 <div class="grid-container"> 46 <div style="width:10px;"></div> 47 <div style="width:30px; margin-left:20px"></div> 48 <div style="width:30px;"></div> 49 <div style="width:40px;"></div> 50 <div style="width:50px;"></div> 51 <div style="width:60px;"></div> 52 </div> 53 </div> 54 55 <div class="holder"> 56 <div class="grid-container"> 57 <div style="width:30px; margin-left:30px"></div> 58 <div style="width:50px;"></div> 59 <div style="width:60px;"></div> 60 </div> 61 <div class="grid-container"> 62 <div style="width:10px"></div> 63 <div style="width:20px"></div> 64 </div> 65 </div> 66 67 <div class="holder"> 68 <div class="grid-container"> 69 <div style="width:10px;"></div> 70 <div style="width:30px; margin-left:20px;"></div> 71 <div style="width:50px;"></div> 72 <div style="width:60px;"></div> 73 </div> 74 <div class="grid-container"> 75 <div class="invis"></div> 76 <div style="width:10px"></div> 77 <div style="width:20px"></div> 78 </div> 79 </div> 80 81 <div class="holder"> 82 <div class="grid-container"> 83 <div style="width:50px; margin-left:10px;"></div> 84 <div style="width:40px;"></div> 85 <div style="width:30px;"></div> 86 <div style="width:40px;"></div> 87 <div style="width:50px;"></div> 88 </div> 89 </div> 90 91 <div class="holder"> 92 <div class="grid-container"> 93 <div style="width:90px; margin-left:10px;"></div> 94 <div style="width:30px;"></div> 95 <div style="width:40px;"></div> 96 <div style="width:50px;"></div> 97 <div style="width:60px;"></div> 98 </div> 99 </div> 100 101 <div class="holder"> 102 <div class="grid-container"> 103 <div class="invis"></div> 104 <div style="width:10px;"></div> 105 <div class="invis"></div> 106 <div style="width:90px;"></div> 107 <div class="invis"></div> 108 <div style="width:30px;"></div> 109 <div style="width:40px;"></div> 110 </div> 111 </div> 112 113 <div class="holder"> 114 <div class="grid-container alt-color"> 115 <div class="invis"></div> 116 <div style="width:10px;"></div> 117 <div style="width:120px;"></div> 118 <div style="width:40px;"></div> 119 </div> 120 </div> 121 122 <div class="holder"> 123 <div class="grid-container"> 124 <div style="width:10px;"></div> 125 <div style="width:90px;"></div> 126 <div style="width:30px;"></div> 127 <div style="width:40px;"></div> 128 <div style="width:50px;"></div> 129 </div> 130 </div> 131 132 <div class="holder"> 133 <div class="grid-container"> 134 <div class="invis"></div> 135 <div style="width:10px;"></div> 136 <div class="invis"></div> 137 <div style="width:50px;"></div> 138 <div class="invis"></div> 139 <div style="width:40px;"></div> 140 <div style="width:30px;"></div> 141 </div> 142 </div> 143 144 <div class="holder"> 145 <div class="grid-container alt-color"> 146 <div class="invis"></div> 147 <div style="width:10px;"></div> 148 <div style="width:90px;"></div> 149 <div style="width:30px;"></div> 150 </div> 151 </div> 152 153 <div class="holder"> 154 <div class="grid-container"> 155 <div style="width:10px;"></div> 156 <div style="width:50px;"></div> 157 <div style="width:40px;"></div> 158 <div style="width:30px;"></div> 159 <div style="width:40px;"></div> 160 </div> 161 </div> 162 163 <div class="holder"> 164 <div class="grid-container"> 165 <div style="width:10px;"></div> 166 <div style="width:20px;"></div> 167 <div style="width:140px;"></div> 168 <div style="width:50px;"></div> 169 </div> 170 </div> 171 172 <div class="holder"> 173 <div class="grid-container"> 174 <div style="width:10px;"></div> 175 <div class="invis"></div> 176 <div style="width:20px;"></div> 177 <div class="invis"></div> 178 <div style="width:140px;"></div> 179 </div> 180 </div> 181 182 <div class="holder"> 183 <div class="grid-container alt-color"> 184 <div style="width:30px;"></div> 185 <div style="width:140px;"></div> 186 </div> 187 </div> 188 189 <div class="holder"> 190 <div class="grid-container"> 191 <div class="invis"></div> 192 <div style="width:10px;"></div> 193 <div class="invis"></div> 194 <div style="width:140px; margin-left:20px;"></div> 195 </div> 196 </div> 197 198 <div class="holder"> 199 <div class="grid-container"> 200 <div style="width:10px;"></div> 201 <div style="width:210px;"></div> 202 <div style="width:60px;"></div> 203 </div> 204 </div> 205 206 <div class="holder"> 207 <div class="grid-container alt-color"> 208 <div style="width:10px;"></div> 209 <div style="width:210px;"></div> 210 <div style="width:60px;"></div> 211 </div> 212 </div> 213 214 <div class="holder"> 215 <div class="grid-container"> 216 <div class="invis"></div> 217 <div style="width:10px;"></div> 218 <div class="invis"></div> 219 <div style="width:210px;"></div> 220 </div> 221 </div>