row-auto-repeat-014.html (4935B)
1 <!DOCTYPE html> 2 <title>Auto repeat tracks with multiple tracks and line names.</title> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 4 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 5 <link rel="match" href="row-auto-repeat-014-ref.html"> 6 <style> 7 .grid-lanes { 8 display: inline-grid-lanes; 9 border: 1px solid black; 10 grid-template-rows: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; 11 grid-lanes-direction: row; 12 grid-row-gap: 3px; 13 width: min-content; 14 /* Does not fit a whole-number of repetitions */ 15 height: 94px; 16 background: pink; 17 } 18 div > div { 19 background: blue; 20 width: 25px; 21 height: 100%; 22 } 23 </style> 24 <body> 25 <!-- u --> 26 <div class="grid-lanes"> 27 <div style="grid-row-start: u"></div> 28 </div> 29 <!-- non-existent line name --> 30 <div class="grid-lanes"> 31 <div style="grid-row-start: nonesuch"></div> 32 </div> 33 <div class="grid-lanes"> 34 <div style="grid-row-start: u 1"></div> 35 </div> 36 <div class="grid-lanes"> 37 <div style="grid-row-start: u -1"></div> 38 </div> 39 <!-- Also non-existent, there is only one u --> 40 <div class="grid-lanes"> 41 <div style="grid-row-start: u 4"></div> 42 </div> 43 <div class="grid-lanes"> 44 <div style="grid-row-start: u 9"></div> 45 </div> 46 <div class="grid-lanes"> 47 <div style="grid-row-start: u 2"></div> 48 </div> 49 <div class="grid-lanes"> 50 <div style="grid-row-start: u -2"></div> 51 </div> 52 <div class="grid-lanes"> 53 <div style="grid-row-start: u -6"></div> 54 </div> 55 <div class="grid-lanes"> 56 <div style="grid-row-start: u -7"></div> 57 </div> 58 <!-- v --> 59 <div class="grid-lanes"> 60 <div style="grid-row-start: v"></div> 61 </div> 62 <div class="grid-lanes"> 63 <div style="grid-row-start: v 1"></div> 64 </div> 65 <div class="grid-lanes"> 66 <div style="grid-row-start: v 2"></div> 67 </div> 68 <div class="grid-lanes"> 69 <div style="grid-row-start: v -1"></div> 70 </div> 71 <div class="grid-lanes"> 72 <div style="grid-row-start: v -2"></div> 73 </div> 74 <!-- Also non-existent, there are only two v's --> 75 <div class="grid-lanes"> 76 <div style="grid-row-start: v 3"></div> 77 </div> 78 <div class="grid-lanes"> 79 <div style="grid-row-start: v -3"></div> 80 </div> 81 <!-- w --> 82 <div class="grid-lanes"> 83 <div style="grid-row-start: w"></div> 84 </div> 85 <div class="grid-lanes"> 86 <div style="grid-row-start: w 1"></div> 87 </div> 88 <div class="grid-lanes"> 89 <div style="grid-row-start: w 2"></div> 90 </div> 91 <div class="grid-lanes"> 92 <div style="grid-row-start: w -1"></div> 93 </div> 94 <div class="grid-lanes"> 95 <div style="grid-row-start: w -2"></div> 96 </div> 97 <!-- Also non-existent, there are only two w's --> 98 <div class="grid-lanes"> 99 <div style="grid-row-start: w 3"></div> 100 </div> 101 <div class="grid-lanes"> 102 <div style="grid-row-start: w -3"></div> 103 </div> 104 <!-- x --> 105 <div class="grid-lanes"> 106 <div style="grid-row-start: x"></div> 107 </div> 108 <div class="grid-lanes"> 109 <div style="grid-row-start: x 1"></div> 110 </div> 111 <div class="grid-lanes"> 112 <div style="grid-row-start: x 2"></div> 113 </div> 114 <div class="grid-lanes"> 115 <div style="grid-row-start: x -1"></div> 116 </div> 117 <div class="grid-lanes"> 118 <div style="grid-row-start: x -2"></div> 119 </div> 120 <!-- Also non-existent, there are only two x's --> 121 <div class="grid-lanes"> 122 <div style="grid-row-start: x 3"></div> 123 </div> 124 <div class="grid-lanes"> 125 <div style="grid-row-start: x -3"></div> 126 </div> 127 <!-- y --> 128 <div class="grid-lanes"> 129 <div style="grid-row-start: y"></div> 130 </div> 131 <div class="grid-lanes"> 132 <div style="grid-row-start: y 1"></div> 133 </div> 134 <div class="grid-lanes"> 135 <div style="grid-row-start: y 2"></div> 136 </div> 137 <div class="grid-lanes"> 138 <div style="grid-row-start: y -1"></div> 139 </div> 140 <div class="grid-lanes"> 141 <div style="grid-row-start: y -2"></div> 142 </div> 143 <!-- Also non-existent, there are only two y's --> 144 <div class="grid-lanes"> 145 <div style="grid-row-start: y -3"></div> 146 </div> 147 <div class="grid-lanes"> 148 <div style="grid-row-start: y 3"></div> 149 </div> 150 <!-- z --> 151 <div class="grid-lanes"> 152 <div style="grid-row-start: z"></div> 153 </div> 154 <div class="grid-lanes"> 155 <div style="grid-row-start: z 1"></div> 156 </div> 157 <div class="grid-lanes"> 158 <div style="grid-row-start: z -1"></div> 159 </div> 160 <!-- Also non-existent, there is only one z --> 161 <div class="grid-lanes"> 162 <div style="grid-row-start: z 2"></div> 163 </div> 164 <div class="grid-lanes"> 165 <div style="grid-row-start: z -2"></div> 166 </div> 167 </body>