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