orthogonal-writing-mode-005.html (9891B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Test: line names in orthogonal parent subgrid</title> 5 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing"> 7 <link rel="match" href="orthogonal-writing-mode-005-ref.html"> 8 <style> 9 body { 10 color:black; background-color:white; font:10px monospace; padding:0; margin:0; line-height:0; 11 } 12 13 .grid { 14 display: inline-grid; 15 grid-auto-columns: 15px; 16 border: 1px solid; 17 vertical-align: bottom; 18 } 19 20 .subgrid { 21 display: grid; 22 grid-template-columns: subgrid; 23 grid-column: 3 / span 4; 24 background: grey; 25 } 26 .grid > .subgrid > .subgrid { 27 writing-mode: vertical-lr; 28 grid-template-rows: subgrid; 29 grid-template-columns: initial; 30 grid-column: 1 / span 4; 31 grid-auto-columns: 8px; 32 grid-auto-flow: column; 33 } 34 35 .fill-1a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] } /* [y] [z] [z] [z] [z] */ 36 .fill-1b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] } /* [x] [y] [z] [z] [z] */ 37 .fill-1c { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] } /* [x] [x] [y] [z] [z] */ 38 .fill-1d { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] } /* [x] [x] [x] [y] [z] */ 39 .fill-1e { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) } /* [x] [x] [x] [x] [y] */ 40 41 .areas-1a { grid-template-areas: 'x x x x' } 42 .areas-1b { grid-template-areas: '. x x x' } 43 .areas-1c { grid-template-areas: 'x x x .' } 44 .areas-1d { grid-template-areas: '. . x x' } 45 .areas-1e { grid-template-areas: '. . x .' } 46 47 .subgrid > .subgrid > :nth-child(2n) { background: black; } 48 .subgrid > .subgrid > :nth-child(2n+1) { background: pink; } 49 .subgrid > .subgrid > * { writing-mode: horizontal-tb; } 50 51 </style> 52 </head> 53 <body> 54 55 <!-- Line names before auto repeat --> 56 <div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> 57 <div style="grid-row:z 5"></div> 58 <div style="grid-row:z 4"></div> 59 <div style="grid-row:z 3"></div> 60 <div style="grid-row:z 2"></div> 61 <div style="grid-row:z 1"></div> 62 <div style="grid-row:z -1"></div> 63 <div style="grid-row:z -2"></div> 64 <div style="grid-row:z -3"></div> 65 <div style="grid-row:z -4"></div> 66 <div style="grid-row:z -5"></div> 67 </div></div></div> 68 69 <div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> 70 <div style="grid-row:x 5"></div> 71 <div style="grid-row:x 4"></div> 72 <div style="grid-row:x 3"></div> 73 <div style="grid-row:x 2"></div> 74 <div style="grid-row:x 1"></div> 75 <div style="grid-row:x -1"></div> 76 <div style="grid-row:x -2"></div> 77 <div style="grid-row:x -3"></div> 78 <div style="grid-row:x -4"></div> 79 <div style="grid-row:x -5"></div> 80 </div></div></div> 81 82 <div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> 83 <div style="grid-row:x 5"></div> 84 <div style="grid-row:x 4"></div> 85 <div style="grid-row:x 3"></div> 86 <div style="grid-row:x 2"></div> 87 <div style="grid-row:x 1"></div> 88 <div style="grid-row:x -1"></div> 89 <div style="grid-row:x -2"></div> 90 <div style="grid-row:x -3"></div> 91 <div style="grid-row:x -4"></div> 92 <div style="grid-row:x -5"></div> 93 </div></div></div> 94 95 <div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> 96 <div style="grid-row:x 5"></div> 97 <div style="grid-row:x 4"></div> 98 <div style="grid-row:x 3"></div> 99 <div style="grid-row:x 2"></div> 100 <div style="grid-row:x 1"></div> 101 <div style="grid-row:x -1"></div> 102 <div style="grid-row:x -2"></div> 103 <div style="grid-row:x -3"></div> 104 <div style="grid-row:x -4"></div> 105 <div style="grid-row:x -5"></div> 106 </div></div></div> 107 108 <div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> 109 <div style="grid-row:x 5"></div> 110 <div style="grid-row:x 4"></div> 111 <div style="grid-row:x 3"></div> 112 <div style="grid-row:x 2"></div> 113 <div style="grid-row:x 1"></div> 114 <div style="grid-row:x -1"></div> 115 <div style="grid-row:x -2"></div> 116 <div style="grid-row:x -3"></div> 117 <div style="grid-row:x -4"></div> 118 <div style="grid-row:x -5"></div> 119 </div></div></div> 120 121 <div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> 122 <div style="grid-row:y 5"></div> 123 <div style="grid-row:y 4"></div> 124 <div style="grid-row:y 3"></div> 125 <div style="grid-row:y 2"></div> 126 <div style="grid-row:y 1"></div> 127 <div style="grid-row:y -1"></div> 128 <div style="grid-row:y -2"></div> 129 <div style="grid-row:y -3"></div> 130 <div style="grid-row:y -4"></div> 131 <div style="grid-row:y -5"></div> 132 </div></div></div> 133 134 <!-- Auto repeat line names --> 135 <div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> 136 <div style="grid-row:y 5"></div> 137 <div style="grid-row:y 4"></div> 138 <div style="grid-row:y 3"></div> 139 <div style="grid-row:y 2"></div> 140 <div style="grid-row:y 1"></div> 141 <div style="grid-row:y -1"></div> 142 <div style="grid-row:y -2"></div> 143 <div style="grid-row:y -3"></div> 144 <div style="grid-row:y -4"></div> 145 <div style="grid-row:y -5"></div> 146 </div></div></div> 147 148 <div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> 149 <div style="grid-row:y 5"></div> 150 <div style="grid-row:y 4"></div> 151 <div style="grid-row:y 3"></div> 152 <div style="grid-row:y 2"></div> 153 <div style="grid-row:y 1"></div> 154 <div style="grid-row:y -1"></div> 155 <div style="grid-row:y -2"></div> 156 <div style="grid-row:y -3"></div> 157 <div style="grid-row:y -4"></div> 158 <div style="grid-row:y -5"></div> 159 </div></div></div> 160 161 <div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> 162 <div style="grid-row:y 5"></div> 163 <div style="grid-row:y 4"></div> 164 <div style="grid-row:y 3"></div> 165 <div style="grid-row:y 2"></div> 166 <div style="grid-row:y 1"></div> 167 <div style="grid-row:y -1"></div> 168 <div style="grid-row:y -2"></div> 169 <div style="grid-row:y -3"></div> 170 <div style="grid-row:y -4"></div> 171 <div style="grid-row:y -5"></div> 172 </div></div></div> 173 174 <div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> 175 <div style="grid-row:y 5"></div> 176 <div style="grid-row:y 4"></div> 177 <div style="grid-row:y 3"></div> 178 <div style="grid-row:y 2"></div> 179 <div style="grid-row:y 1"></div> 180 <div style="grid-row:y -1"></div> 181 <div style="grid-row:y -2"></div> 182 <div style="grid-row:y -3"></div> 183 <div style="grid-row:y -4"></div> 184 <div style="grid-row:y -5"></div> 185 </div></div></div> 186 187 <div class="grid"><div class="subgrid fill-1a"><div class="subgrid"> 188 <div style="grid-row:z 5"></div> 189 <div style="grid-row:z 4"></div> 190 <div style="grid-row:z 3"></div> 191 <div style="grid-row:z 2"></div> 192 <div style="grid-row:z 1"></div> 193 <div style="grid-row:z -1"></div> 194 <div style="grid-row:z -2"></div> 195 <div style="grid-row:z -3"></div> 196 <div style="grid-row:z -4"></div> 197 <div style="grid-row:z -5"></div> 198 </div></div></div> 199 200 <div class="grid"><div class="subgrid fill-1b"><div class="subgrid"> 201 <div style="grid-row:z 5"></div> 202 <div style="grid-row:z 4"></div> 203 <div style="grid-row:z 3"></div> 204 <div style="grid-row:z 2"></div> 205 <div style="grid-row:z 1"></div> 206 <div style="grid-row:z -1"></div> 207 <div style="grid-row:z -2"></div> 208 <div style="grid-row:z -3"></div> 209 <div style="grid-row:z -4"></div> 210 <div style="grid-row:z -5"></div> 211 </div></div></div> 212 213 <div class="grid"><div class="subgrid fill-1c"><div class="subgrid"> 214 <div style="grid-row:z 5"></div> 215 <div style="grid-row:z 4"></div> 216 <div style="grid-row:z 3"></div> 217 <div style="grid-row:z 2"></div> 218 <div style="grid-row:z 1"></div> 219 <div style="grid-row:z -1"></div> 220 <div style="grid-row:z -2"></div> 221 <div style="grid-row:z -3"></div> 222 <div style="grid-row:z -4"></div> 223 <div style="grid-row:z -5"></div> 224 </div></div></div> 225 226 <div class="grid"><div class="subgrid fill-1d"><div class="subgrid"> 227 <div style="grid-row:z 5"></div> 228 <div style="grid-row:z 4"></div> 229 <div style="grid-row:z 3"></div> 230 <div style="grid-row:z 2"></div> 231 <div style="grid-row:z 1"></div> 232 <div style="grid-row:z -1"></div> 233 <div style="grid-row:z -2"></div> 234 <div style="grid-row:z -3"></div> 235 <div style="grid-row:z -4"></div> 236 <div style="grid-row:z -5"></div> 237 </div></div></div> 238 239 <div class="grid"><div class="subgrid fill-1e"><div class="subgrid"> 240 <div style="grid-row:z 5"></div> 241 <div style="grid-row:z 4"></div> 242 <div style="grid-row:z 3"></div> 243 <div style="grid-row:z 2"></div> 244 <div style="grid-row:z 1"></div> 245 <div style="grid-row:z -1"></div> 246 <div style="grid-row:z -2"></div> 247 <div style="grid-row:z -3"></div> 248 <div style="grid-row:z -4"></div> 249 <div style="grid-row:z -5"></div> 250 </div></div></div> 251 252 <!-- Named grid areas --> 253 <div class="grid"><div class="subgrid areas-1a"><div class="subgrid"> 254 <div style="grid-row:x-start"></div> 255 <div style="grid-row:x"></div> 256 <div style="grid-row:x-start / x-end"></div> 257 <div style="grid-row:x-end"></div> 258 </div></div></div> 259 260 <div class="grid"><div class="subgrid areas-1b"><div class="subgrid"> 261 <div style="grid-row:x-start"></div> 262 <div style="grid-row:x"></div> 263 <div style="grid-row:x-start / x-end"></div> 264 <div style="grid-row:x-end"></div> 265 </div></div></div> 266 267 <div class="grid"><div class="subgrid areas-1c"><div class="subgrid"> 268 <div style="grid-row:x-start"></div> 269 <div style="grid-row:x"></div> 270 <div style="grid-row:x-start / x-end"></div> 271 <div style="grid-row:x-end"></div> 272 </div></div></div> 273 274 <div class="grid"><div class="subgrid areas-1d"><div class="subgrid"> 275 <div style="grid-row:x-start"></div> 276 <div style="grid-row:x"></div> 277 <div style="grid-row:x-start / x-end"></div> 278 <div style="grid-row:x-end"></div> 279 </div></div></div> 280 281 <div class="grid"><div class="subgrid areas-1e"><div class="subgrid"> 282 <div style="grid-row:x-start"></div> 283 <div style="grid-row:x"></div> 284 <div style="grid-row:x-start / x-end"></div> 285 <div style="grid-row:x-end"></div> 286 </div></div></div> 287 </body> 288 </html>