grid-repeat-auto-fill-fit-005-ref.html (16962B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: repeat(auto-fill/auto-fit)</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; 13 } 14 15 .grid { 16 display: grid; 17 float: left; 18 position: relative; 19 border: 2px solid; 20 grid-auto-columns: 10px; 21 grid-auto-rows: 10px; 22 grid-auto-flow: column; 23 grid-gap: 2px; 24 margin-right: 2px; 25 padding-top: 3px; 26 padding-bottom: 2px; 27 } 28 29 .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } 30 .r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } 31 .r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;} 32 .r01 a {grid-row-end:auto; } 33 .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } 34 .r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } 35 .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; } 36 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } 37 .r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } 38 .r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; } 39 .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; } 40 .r0a { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 10px [f]; grid-gap:0; padding-bottom:4px;} 41 42 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; } 43 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; } 44 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; } 45 fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; grid-gap:0;} 46 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; } 47 fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; } 48 fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;} 49 fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; } 50 51 .w100 { height: 100px; } 52 .w3 { height: 3px; } 53 .w20 { height: 20px; } 54 .w50 { height: 50px; } 55 .w80 { height: 80px; } 56 .mw100 { min-height: 100px; } 57 .mw3 { height: 3px; } 58 .mw20 { height: 20px; } 59 .mw50 { min-height: 50px; } 60 .mw80 { min-height: 80px; } 61 .xw100 { max-height: 100px; } 62 .xw3 { height: 3px; } 63 .xw20 { height: 20px; } 64 .xw50 { max-height: 50px; } 65 .xw80 { max-height: 80px; } 66 67 .w { width:10px} 68 69 x { 70 height: 10px; 71 background: grey; 72 } 73 a { 74 position: absolute; 75 left:0; top:0; bottom:0; width: 3px; 76 background: black; 77 grid-row: c / c -1; 78 } 79 b { 80 position: absolute; 81 right:0; top:0; bottom:0; width: 3px; 82 background: brown; 83 grid-row: auto / c -1; 84 } 85 86 x:first-child { 87 background: lime; 88 } 89 x:last-child { 90 background: blue; 91 } 92 93 fill,fit { 94 float: left; 95 height: 400px; 96 } 97 </style> 98 </head> 99 <body> 100 101 <fill> 102 103 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> 104 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> 105 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 106 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> 107 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 108 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> 109 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 110 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 111 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 112 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 113 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 114 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 115 116 <br clear="all"> 117 <br clear="all"> 118 119 <div class="grid r1 w w20"><a></a><b></b></div> 120 <div class="grid r1 w w3"><a></a><b></b></div> 121 <div class="grid r1 w xw20"><a></a><b></b></div> 122 <div class="grid r1 w xw3"><a></a><b></b></div> 123 <div class="grid r1 w mw20"><a></a><b></b></div> 124 <div class="grid r1 w mw3"><a></a><b></b></div> 125 <div class="grid r1 w w20 xw3"><a></a><b></b></div> 126 <div class="grid r1 w w3 mw20"><a></a><b></b></div> 127 <div class="grid r1 w w3 mw3"><a></a><b></b></div> 128 <div class="grid r1 w xw20"><a></a><b></b></div> 129 <div class="grid r1 w xw3 mw20"><a></a><b></b></div> 130 <div class="grid r1 w mw20"><a></a><b></b></div> 131 132 <div class="grid r1" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 133 <div class="grid r1" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 134 <div class="grid r1" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 135 <div class="grid r1" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 136 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 137 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 138 139 <div class="grid w r1" style="min-height:0"><a></a><b></b></div> 140 <div class="grid w r1" style="height:0"><a></a><b></b></div> 141 <div class="grid w r1" style="min-height:0; height:0"><a></a><b></b></div> 142 <div class="grid w r1" style="max-height:0"><a></a><b></b></div> 143 <div class="grid w r0"><a></a><b></b></div> 144 <div class="grid w ra"><a></a><b></b></div> 145 146 <br clear="all"> 147 <br clear="all"> 148 149 <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div> 150 <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div> 151 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> 152 <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 153 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> 154 <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div> 155 <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 156 <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 157 <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 158 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> 159 <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 160 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> 161 162 <br clear="all"> 163 <br clear="all"> 164 165 <div class="grid r20 w w20"><a></a><b></b></div> 166 <div class="grid r20 w w3"><a></a><b></b></div> 167 <div class="grid r20 w xw20"><a></a><b></b></div> 168 <div class="grid r20 w xw3"><a></a><b></b></div> 169 <div class="grid r20 w mw20"><a></a><b></b></div> 170 <div class="grid r20 w mw3"><a></a><b></b></div> 171 <div class="grid r20 w w20 xw3"><a></a><b></b></div> 172 <div class="grid r20 w w3 mw20"><a></a><b></b></div> 173 <div class="grid r20 w w3 mw3"><a></a><b></b></div> 174 <div class="grid r20 w xw20"><a></a><b></b></div> 175 <div class="grid r20 w xw3 mw20"><a></a><b></b></div> 176 <div class="grid r20 w mw20"><a></a><b></b></div> 177 178 <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 179 <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 180 <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 181 <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 182 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 183 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 184 185 <div class="grid w r20" style="min-height:0"><a></a><b></b></div> 186 <div class="grid w r20" style="height:0"><a></a><b></b></div> 187 <div class="grid w r20" style="min-height:0; height:0"><a></a><b></b></div> 188 <div class="grid w r20" style="max-height:0"><a></a><b></b></div> 189 <div class="grid w r02"><a></a><b></b></div> 190 191 192 <br clear="all"> 193 <br clear="all"> 194 195 <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div> 196 <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div> 197 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> 198 <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div> 199 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> 200 <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div> 201 <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 202 <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 203 <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 204 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> 205 <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 206 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> 207 208 <br clear="all"> 209 <br clear="all"> 210 211 <div class="grid r30 w w20"><a></a><b></b></div> 212 <div class="grid r30 w w3"><a></a><b></b></div> 213 <div class="grid r30 w xw20"><a></a><b></b></div> 214 <div class="grid r30 w xw3"><a></a><b></b></div> 215 <div class="grid r30 w mw20"><a></a><b></b></div> 216 <div class="grid r30 w mw3"><a></a><b></b></div> 217 <div class="grid r30 w w20 xw3"><a></a><b></b></div> 218 <div class="grid r30 w w3 mw20"><a></a><b></b></div> 219 <div class="grid r30 w w3 mw3"><a></a><b></b></div> 220 <div class="grid r30 w xw20"><a></a><b></b></div> 221 <div class="grid r30 w xw3 mw20"><a></a><b></b></div> 222 <div class="grid r30 w mw20"><a></a><b></b></div> 223 224 <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 225 <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 226 <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 227 <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 228 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 229 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 230 231 <div class="grid w r30" style="min-height:0"><a></a><b></b></div> 232 <div class="grid w r30" style="height:0"><a></a><b></b></div> 233 <div class="grid w r30" style="min-height:0; height:0"><a></a><b></b></div> 234 <div class="grid w r30" style="max-height:0"><a></a><b></b></div> 235 <div class="grid w r003"><a></a><b></b></div> 236 237 238 </fill> 239 240 <fit> 241 242 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div> 243 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div> 244 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 245 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div> 246 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 247 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div> 248 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 249 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 250 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 251 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div> 252 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 253 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div> 254 255 <br clear="all"> 256 <br clear="all"> 257 258 <div class="grid r01 w w20"><a></a><b></b></div> 259 <div class="grid r01 w w3"><a></a><b></b></div> 260 <div class="grid r01 w xw20"><a></a><b></b></div> 261 <div class="grid r01 w xw3"><a></a><b></b></div> 262 <div class="grid r01 w mw20"><a></a><b></b></div> 263 <div class="grid r01 w mw3"><a></a><b></b></div> 264 <div class="grid r01 w w20 xw3"><a></a><b></b></div> 265 <div class="grid r01 w w3 mw20"><a></a><b></b></div> 266 <div class="grid r01 w w3 mw3"><a></a><b></b></div> 267 <div class="grid r01 w xw20"><a></a><b></b></div> 268 <div class="grid r01 w xw3 mw20"><a></a><b></b></div> 269 <div class="grid r01 w mw20"><a></a><b></b></div> 270 271 <div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 272 <div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 273 <div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 274 <div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 275 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 276 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 277 278 <div class="grid w r01" style="max-height:0"><a></a><b></b></div> 279 <div class="grid w r01" style="height:0"><a></a><b></b></div> 280 <div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div> 281 <div class="grid w r01" style="max-height:0"><a></a><b></b></div> 282 <div class="grid w r01" style="max-height:0"><a></a><b></b></div> 283 <div class="grid w r0a"><a></a><b></b></div> 284 285 <br clear="all"> 286 <br clear="all"> 287 288 <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div> 289 <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div> 290 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> 291 <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 292 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> 293 <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div> 294 <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 295 <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 296 <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 297 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div> 298 <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 299 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div> 300 301 <br clear="all"> 302 <br clear="all"> 303 304 <div class="grid r02 w w20"><a></a><b></b></div> 305 <div class="grid r02 w w3"><a></a><b></b></div> 306 <div class="grid r02 w xw20"><a></a><b></b></div> 307 <div class="grid r02 w xw3"><a></a><b></b></div> 308 <div class="grid r02 w mw20"><a></a><b></b></div> 309 <div class="grid r02 w mw3"><a></a><b></b></div> 310 <div class="grid r02 w w20 xw3"><a></a><b></b></div> 311 <div class="grid r02 w w3 mw20"><a></a><b></b></div> 312 <div class="grid r02 w w3 mw3"><a></a><b></b></div> 313 <div class="grid r02 w xw20"><a></a><b></b></div> 314 <div class="grid r02 w xw3 mw20"><a></a><b></b></div> 315 <div class="grid r02 w mw20"><a></a><b></b></div> 316 317 <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 318 <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 319 <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 320 <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 321 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 322 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 323 324 <div class="grid w r02" style="min-height:0"><a></a><b></b></div> 325 <div class="grid w r02" style="height:0"><a></a><b></b></div> 326 <div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div> 327 <div class="grid w r02" style="max-height:0"><a></a><b></b></div> 328 <div class="grid w r02"><a></a><b></b></div> 329 330 331 <br clear="all"> 332 <br clear="all"> 333 334 <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div> 335 <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div> 336 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> 337 <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div> 338 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> 339 <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div> 340 <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div> 341 <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 342 <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div> 343 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div> 344 <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div> 345 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div> 346 347 <br clear="all"> 348 <br clear="all"> 349 350 <div class="grid r03 w w20"><a></a><b></b></div> 351 <div class="grid r03 w w3"><a></a><b></b></div> 352 <div class="grid r03 w xw20"><a></a><b></b></div> 353 <div class="grid r03 w xw3"><a></a><b></b></div> 354 <div class="grid r03 w mw20"><a></a><b></b></div> 355 <div class="grid r03 w mw3"><a></a><b></b></div> 356 <div class="grid r03 w w20 xw3"><a></a><b></b></div> 357 <div class="grid r03 w w3 mw20"><a></a><b></b></div> 358 <div class="grid r03 w w3 mw3"><a></a><b></b></div> 359 <div class="grid r03 w xw20"><a></a><b></b></div> 360 <div class="grid r03 w xw3 mw20"><a></a><b></b></div> 361 <div class="grid r03 w mw20"><a></a><b></b></div> 362 363 <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></div> 364 <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></div> 365 <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b></b><x></x></div> 366 <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></div> 367 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div> 368 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div> 369 370 <div class="grid w r003" style="min-height:0"><a></a><b></b></div> 371 <div class="grid w r03" style="height:0"><a></a><b></b></div> 372 <div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div> 373 <div class="grid w r03" style="max-height:0"><a></a><b></b></div> 374 <div class="grid w r003"><a></a><b></b></div> 375 376 377 378 </fit> 379 380 381 </body> 382 </html>