grid-support-named-grid-lines-003.html (5446B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Support for named grid lines when 'grid-template-columns' and 'grid-template-rows' have multiple values inside of a repeat.</title> 4 <link rel="author" title="Mozilla" href="https://mozilla.org"> 5 <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"> 6 <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"> 7 <link rel="match" href="grid-support-named-grid-lines-003-ref.html"> 8 <style> 9 10 .holder { 11 width: 300px; 12 height: 20px; 13 border-bottom: 2px solid #cfbfcf; 14 } 15 16 .grid-container { 17 display: grid; 18 /* 19 Defines the grid areas 'repeat', which covers the repeat only, and 20 'around-repeat' which covers the repeat and one track on either end. 21 22 Provides the line name 'all' in every track, the line names 'v' and 'u' 23 which alternates in every grid line. 24 */ 25 grid-template-columns: [v] 10px [around-repeat-start a t-start w-start u all] 20px [repeat-start b] repeat(auto-fit, [all x v] 30px [all w-end y u] 40px [all t-end z]) [repeat-end c v] 50px [around-repeat-end all d u] 60px [e v]; 26 grid-template-rows: 27 [w-start t-start around-repeat-start repeat-start] 28 repeat(auto-fit, 8px) 29 [w-end t-end around-repeat-end repeat-end ] 30 8px; 31 grid-row-gap: 2px; 32 } 33 34 .grid-container > :nth-child(3n) { background: sienna; } 35 .grid-container > :nth-child(3n+1) { background: gold; } 36 .grid-container > :nth-child(3n+2) { background: orange; } 37 38 /* Alternate colors for some grid containers, where sometimes multiple grid 39 items would appear as one item or the actual ordering would be ambiguous 40 otherwise. */ 41 .alt-color > :nth-child(2n) { background: sienna; } 42 .alt-color > :nth-child(2n+1) { background: orange; } 43 44 </style> 45 46 <p>The test passes if it has the same visual effect as reference.</p> 47 48 <!-- Use line names that are inside a repeat. --> 49 <div class="holder"> 50 <div class="grid-container"> 51 <div style="grid-column-start:x"></div> 52 <div style="grid-column-start:z"></div> 53 <div></div> 54 <div></div> 55 <div></div> 56 </div> 57 </div> 58 59 <div class="holder"> 60 <div class="grid-container"> 61 <div></div> 62 <div style="grid-column-start:x"></div> 63 <div style="grid-column-start:z"></div> 64 <div></div> 65 <div></div> 66 <div></div> 67 </div> 68 </div> 69 70 <div class="holder"> 71 <div class="grid-container"> 72 <div style="grid-column-start:x 1"></div> 73 <div style="grid-column-start:z 2"></div> 74 <div></div> 75 <div></div> 76 <div></div> 77 </div> 78 </div> 79 80 <div class="holder"> 81 <div class="grid-container"> 82 <div></div> 83 <div style="grid-column-start:x 1"></div> 84 <div style="grid-column-start:z 2"></div> 85 <div></div> 86 <div></div> 87 <div></div> 88 </div> 89 </div> 90 91 <!-- Using a span that goes from outside a repeat to inside the repeat. --> 92 <div class="holder"> 93 <div class="grid-container"> 94 <div style="grid-column:u / y"></div> 95 <div></div> 96 <div></div> 97 <div></div> 98 <div></div> 99 </div> 100 </div> 101 102 <div class="holder"> 103 <div class="grid-container"> 104 <div style="grid-column:u / z"></div> 105 <div></div> 106 <div></div> 107 <div></div> 108 <div></div> 109 </div> 110 </div> 111 112 <!-- Using an area which has one end inside the repeat. --> 113 <div class="holder"> 114 <div class="grid-container"> 115 <div style="grid-area: t;"></div> 116 <div></div> 117 <div></div> 118 <div></div> 119 </div> 120 </div> 121 122 <div class="holder"> 123 <div class="grid-container alt-color"> 124 <div style="grid-area: t;"></div> 125 <div></div> 126 <div></div> 127 <div></div> 128 </div> 129 </div> 130 131 <div class="holder"> 132 <div class="grid-container"> 133 <div></div> 134 <div style="grid-area: t;"></div> 135 <div></div> 136 <div></div> 137 <div></div> 138 </div> 139 </div> 140 141 <div class="holder"> 142 <div class="grid-container"> 143 <div style="grid-area: w;"></div> 144 <div></div> 145 <div></div> 146 <div></div> 147 </div> 148 </div> 149 150 <div class="holder"> 151 <div class="grid-container alt-color"> 152 <div style="grid-area: w;"></div> 153 <div></div> 154 <div></div> 155 <div></div> 156 </div> 157 </div> 158 159 <div class="holder"> 160 <div class="grid-container"> 161 <div></div> 162 <div style="grid-area: w;"></div> 163 <div></div> 164 <div></div> 165 <div></div> 166 </div> 167 </div> 168 169 <!-- Using an area which spans the entire repeat. --> 170 <div class="holder"> 171 <div class="grid-container"> 172 <div></div> 173 <div></div> 174 <div style="grid-area: repeat;"></div> 175 <div></div> 176 </div> 177 </div> 178 179 <div class="holder"> 180 <div class="grid-container"> 181 <div></div> 182 <div style="grid-area: repeat;"></div> 183 <div></div> 184 </div> 185 </div> 186 187 <div class="holder"> 188 <div class="grid-container alt-color"> 189 <div></div> 190 <div style="grid-area: repeat;"></div> 191 <div></div> 192 </div> 193 </div> 194 195 <div class="holder"> 196 <div class="grid-container"> 197 <div style="grid-area: repeat;"></div> 198 <div></div> 199 </div> 200 </div> 201 202 <div class="holder"> 203 <div class="grid-container"> 204 <div></div> 205 <div style="grid-area: around-repeat;"></div> 206 <div></div> 207 </div> 208 </div> 209 210 <div class="holder"> 211 <div class="grid-container alt-color"> 212 <div></div> 213 <div style="grid-area: around-repeat;"></div> 214 <div></div> 215 </div> 216 </div> 217 218 <div class="holder"> 219 <div class="grid-container"> 220 <div style="grid-area: around-repeat;"></div> 221 <div></div> 222 </div> 223 </div>