grid-support-named-grid-lines-002.html (5402B)
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-002-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 alternate 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-fill, [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-fill, 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 the line names just before and just after the repeat. --> 49 <div class="holder"> 50 <div class="grid-container"> 51 <div style="grid-column:b / span 1"></div> 52 </div> 53 </div> 54 55 <div class="holder"> 56 <div class="grid-container"> 57 <div style="grid-column:c / span 1"></div> 58 </div> 59 </div> 60 61 <!-- Use line names that are inside a repeat. --> 62 <div class="holder"> 63 <div class="grid-container"> 64 <div style="grid-column-start:x"></div> 65 <div style="grid-column-start:z"></div> 66 <div></div> 67 <div></div> 68 <div></div> 69 </div> 70 </div> 71 72 <div class="holder"> 73 <div class="grid-container"> 74 <div></div> 75 <div style="grid-column-start:x"></div> 76 <div style="grid-column-start:z"></div> 77 <div></div> 78 <div></div> 79 <div></div> 80 </div> 81 </div> 82 83 <div class="holder"> 84 <div class="grid-container"> 85 <div style="grid-column-start:x 1"></div> 86 <div style="grid-column-start:z 2"></div> 87 <div></div> 88 <div></div> 89 </div> 90 </div> 91 92 <div class="holder"> 93 <div class="grid-container"> 94 <div></div> 95 <div style="grid-column-start:x 1"></div> 96 <div style="grid-column-start:z 2"></div> 97 <div></div> 98 <div></div> 99 </div> 100 </div> 101 102 <!-- Using a span that goes from outside a repeat to inside the repeat. --> 103 <div class="holder"> 104 <div class="grid-container"> 105 <div style="grid-column:u / y"></div> 106 <div></div> 107 <div></div> 108 <div></div> 109 <div></div> 110 </div> 111 </div> 112 113 <div class="holder"> 114 <div class="grid-container"> 115 <div style="grid-column:u / z"></div> 116 <div></div> 117 <div></div> 118 <div></div> 119 <div></div> 120 </div> 121 </div> 122 123 <!-- Using an area which has one end inside the repeat. --> 124 <div class="holder"> 125 <div class="grid-container"> 126 <div style="grid-area: t;"></div> 127 <div></div> 128 <div></div> 129 <div></div> 130 </div> 131 </div> 132 133 <div class="holder"> 134 <div class="grid-container alt-color"> 135 <div style="grid-area: t;"></div> 136 <div></div> 137 <div></div> 138 <div></div> 139 </div> 140 </div> 141 142 <div class="holder"> 143 <div class="grid-container"> 144 <div></div> 145 <div style="grid-area: t;"></div> 146 <div></div> 147 <div></div> 148 <div></div> 149 </div> 150 </div> 151 152 <div class="holder"> 153 <div class="grid-container"> 154 <div style="grid-area: w;"></div> 155 <div></div> 156 <div></div> 157 <div></div> 158 </div> 159 </div> 160 161 <div class="holder"> 162 <div class="grid-container alt-color"> 163 <div style="grid-area: w;"></div> 164 <div></div> 165 <div></div> 166 <div></div> 167 </div> 168 </div> 169 170 <div class="holder"> 171 <div class="grid-container"> 172 <div></div> 173 <div style="grid-area: w;"></div> 174 <div></div> 175 <div></div> 176 <div></div> 177 </div> 178 </div> 179 180 <!-- Using an area which spans the entire repeat. --> 181 <div class="holder"> 182 <div class="grid-container"> 183 <div></div> 184 <div></div> 185 <div style="grid-area: repeat;"></div> 186 <div></div> 187 </div> 188 </div> 189 190 <div class="holder"> 191 <div class="grid-container"> 192 <div></div> 193 <div style="grid-area: repeat;"></div> 194 <div></div> 195 </div> 196 </div> 197 198 <div class="holder"> 199 <div class="grid-container alt-color"> 200 <div></div> 201 <div style="grid-area: repeat;"></div> 202 <div></div> 203 </div> 204 </div> 205 206 <div class="holder"> 207 <div class="grid-container"> 208 <div style="grid-area: repeat;"></div> 209 <div></div> 210 </div> 211 </div> 212 213 <div class="holder"> 214 <div class="grid-container"> 215 <div style="grid-area: around-repeat;"></div> 216 <div></div> 217 </div> 218 </div>