grid-lanes-fragmentation-001-ref.html (12883B)
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: Grid Lanes layout fragmentation</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 13 } 14 wrapper { 15 display: block; 16 width: 600px; 17 height: 600px; 18 overflow: hidden; 19 } 20 .columns { 21 width: 330px; 22 columns: 6; 23 column-fill: auto; 24 column-gap: 1px; 25 background-color: rgba(80,80,80,.2); 26 margin-bottom: 10px; 27 } 28 .columns:nth-child(2n) { 29 background-color: rgba(10,100,10,.5); 30 } 31 .grid { 32 display: flow-root; 33 border: 1px solid; 34 gap: 2px; 35 } 36 .first { border-bottom-width:0; height:calc(100% - 1px); } 37 .middle { border-top-width:0; border-bottom-width:0; height:100%; } 38 .last { border-top-width:0; } 39 x { 40 background: cyan; 41 height: 5px; 42 } 43 y { 44 background: blue; 45 height: 10px; 46 } 47 z { 48 background: pink; 49 height: 12px; 50 } 51 grid-lanes-track { 52 float: left; 53 height: 100%; 54 gap: 2px; 55 } 56 x,y,z,grid-lanes-track { display: block; } 57 grid-lanes-track > * { margin-bottom:2px; } 58 .last > grid-lanes-track > :last-child { margin-bottom:0; } 59 grid-lanes-track:nth-child(1) { width: 10px; } 60 grid-lanes-track:nth-child(2) { width: 15px; margin-left:2px; } 61 grid-lanes-track:nth-child(3) { width: 20px; margin-left:2px; } 62 </style></head> 63 <body> 64 <wrapper> 65 <div class="columns"> 66 <div class="grid first"> 67 <grid-lanes-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x><x></x></grid-lanes-track> 68 <grid-lanes-track><x></x><z></z><x></x><x></x><x></x><z></z><z></z></grid-lanes-track> 69 <grid-lanes-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x><y style="height:9px"></y></grid-lanes-track> 70 </div> 71 <div class="grid last" style="height:1px"> 72 <grid-lanes-track></grid-lanes-track> 73 <grid-lanes-track></grid-lanes-track> 74 <grid-lanes-track><y style="height:1px"></y></grid-lanes-track> 75 </div> 76 </div> 77 78 <div class="columns"> 79 <div class="grid first"> 80 <grid-lanes-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x></grid-lanes-track> 81 <grid-lanes-track><x></x><z></z><x></x><x></x><x></x><z></z></grid-lanes-track> 82 <grid-lanes-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x></grid-lanes-track> 83 </div> 84 <div class="grid last" style="height:12px"> 85 <grid-lanes-track><z></z></grid-lanes-track> 86 <grid-lanes-track><x></x></grid-lanes-track> 87 <grid-lanes-track><y></y></grid-lanes-track> 88 </div> 89 </div> 90 91 <div class="columns"> 92 <div class="grid first"> 93 <grid-lanes-track><x></x><y></y><y></y><y></y><x></x><x></x></grid-lanes-track> 94 <grid-lanes-track><x></x><z></z><x></x><x></x><x></x><z></z></grid-lanes-track> 95 <grid-lanes-track><x></x><x></x><x></x><z></z><x></x><y></y></grid-lanes-track> 96 </div> 97 <div class="grid last" style="height:24px"> 98 <grid-lanes-track><x></x><x></x><y></y></grid-lanes-track> 99 <grid-lanes-track><z></z></grid-lanes-track> 100 <grid-lanes-track><x></x><x></x></grid-lanes-track> 101 </div> 102 </div> 103 104 <div class="columns"> 105 <div class="grid first"> 106 <grid-lanes-track><x></x><y></y><y></y><y></y></grid-lanes-track> 107 <grid-lanes-track><x></x><z></z><x></x><x></x><x></x></grid-lanes-track> 108 <grid-lanes-track><x></x><x></x><x></x><z></z><x></x><y style="height:5px;"></y></grid-lanes-track> 109 </div> 110 <div class="grid last" style="height:31px"> 111 <grid-lanes-track><z></z><z></z></grid-lanes-track> 112 <grid-lanes-track><x></x><x></x><x></x><x></x></grid-lanes-track> 113 <grid-lanes-track><y style="height:5px"></y><x></x><x></x><y></y></grid-lanes-track> 114 </div> 115 </div> 116 117 <div class="columns"> 118 <div class="grid first"> 119 <grid-lanes-track><x></x><y></y><y></y><y style="height:6px;"></y></grid-lanes-track> 120 <grid-lanes-track><x></x><z></z><x></x><x></x></grid-lanes-track> 121 <grid-lanes-track><x></x><x></x><x></x><z></z></grid-lanes-track> 122 </div> 123 <div class="grid middle"> 124 <grid-lanes-track><y style="height:4px;"></y><z></z><z></z></grid-lanes-track> 125 <grid-lanes-track><x></x><y></y><x></x><x></x><y style="height:5px;"></y></grid-lanes-track> 126 <grid-lanes-track><x></x><x></x><x></x><x></x><x></x></grid-lanes-track> 127 </div> 128 <div class="grid last" style="height:5px"> 129 <grid-lanes-track></grid-lanes-track> 130 <grid-lanes-track><y style="height:5px;"></y></grid-lanes-track> 131 <grid-lanes-track></grid-lanes-track> 132 </div> 133 </div> 134 135 <div class="columns"> 136 <div class="grid first"> 137 <grid-lanes-track><x></x><y></y><y style="height:8px;"></y></grid-lanes-track> 138 <grid-lanes-track><x></x><z></z><x></x></grid-lanes-track> 139 <grid-lanes-track><x></x><x></x><x></x></grid-lanes-track> 140 </div> 141 <div class="grid middle"> 142 <grid-lanes-track><y style="height:2px;"></y><y></y><y></y></grid-lanes-track> 143 <grid-lanes-track><z></z><x></x><x></x></grid-lanes-track> 144 <grid-lanes-track><x></x><x></x><z></z></grid-lanes-track> 145 </div> 146 <div class="grid last" style="height:24px"> 147 <grid-lanes-track><x></x><x></x><x></x></grid-lanes-track> 148 <grid-lanes-track><x></x><x></x><y></y></grid-lanes-track> 149 <grid-lanes-track><z></z></grid-lanes-track> 150 </div> 151 </div> 152 153 <div class="columns"> 154 <div class="grid first"> 155 <grid-lanes-track><x></x><y></y></grid-lanes-track> 156 <grid-lanes-track><x></x></grid-lanes-track> 157 <grid-lanes-track><x></x><x></x></grid-lanes-track> 158 </div> 159 <div class="grid middle"> 160 <grid-lanes-track><z></z></grid-lanes-track> 161 <grid-lanes-track><x></x><x></x><y style="height:4px;"></y></grid-lanes-track> 162 <grid-lanes-track><y></y></grid-lanes-track> 163 </div> 164 <div class="grid middle"> 165 <grid-lanes-track><z></z></grid-lanes-track> 166 <grid-lanes-track><y style="height:6px;"></y><x></x></grid-lanes-track> 167 <grid-lanes-track><x></x><x></x><y style="height:4px;"></y></grid-lanes-track> 168 </div> 169 <div class="grid middle"> 170 <grid-lanes-track><z></z></grid-lanes-track> 171 <grid-lanes-track><x></x><x></x></grid-lanes-track> 172 <grid-lanes-track><y style="height:6px;"></y><x></x></grid-lanes-track> 173 </div> 174 <div class="grid last"> 175 <grid-lanes-track><z></z></grid-lanes-track> 176 <grid-lanes-track><x></x><x></x></grid-lanes-track> 177 <grid-lanes-track><x></x><y></y></grid-lanes-track> 178 </div> 179 </div> 180 181 <div class="columns"> 182 <div class="grid first"> 183 <grid-lanes-track><x></x><y style="height:4px;"></grid-lanes-track> 184 <grid-lanes-track><x></x></grid-lanes-track> 185 <grid-lanes-track><x></x></grid-lanes-track> 186 </div> 187 <div class="grid middle"> 188 <grid-lanes-track><y style="height:6px;"></y><y style="height:4px;"></y></grid-lanes-track> 189 <grid-lanes-track><z style="height:12px;"></z></grid-lanes-track> 190 <grid-lanes-track><x></x><x></x></grid-lanes-track> 191 </div> 192 <div class="grid middle"> 193 <grid-lanes-track><y style="height:6px;"></y><y style="height:4px;"></y></grid-lanes-track> 194 <grid-lanes-track><x></x><x></x></grid-lanes-track> 195 <grid-lanes-track><z style="height:12px;"></z></grid-lanes-track> 196 </div> 197 <div class="grid middle"> 198 <grid-lanes-track><y style="height:6px;"></y></grid-lanes-track> 199 <grid-lanes-track><x></x></grid-lanes-track> 200 <grid-lanes-track><x></x><y style="height:5px;"></y></grid-lanes-track> 201 </div> 202 <div class="grid middle"> 203 <grid-lanes-track><z style="height:12px;"></z></grid-lanes-track> 204 <grid-lanes-track><x></x><x></x></grid-lanes-track> 205 <grid-lanes-track><y style="height:5px;"></y><x></x></grid-lanes-track> 206 </div> 207 <div class="grid middle"> 208 <grid-lanes-track><z style="height:12px;"></z></grid-lanes-track> 209 <grid-lanes-track><x></x><x></x></grid-lanes-track> 210 <grid-lanes-track><x></x><y style="height:5px;"></y></grid-lanes-track> 211 </div> 212 <div class="grid last" style="height:5px;"> 213 <grid-lanes-track></grid-lanes-track> 214 <grid-lanes-track></grid-lanes-track> 215 <grid-lanes-track><y style="height:5px;"></y></grid-lanes-track> 216 </div> 217 </div> 218 219 <div class="columns"> 220 <div class="grid first"> 221 <grid-lanes-track><x></x><y style="height:3px;"></grid-lanes-track> 222 <grid-lanes-track><x></x></grid-lanes-track> 223 <grid-lanes-track><x></x></grid-lanes-track> 224 </div> 225 <div class="grid middle"> 226 <grid-lanes-track><y style="height:7px;"></y><y style="height:3px;"></y></grid-lanes-track> 227 <grid-lanes-track><z style="height:11px;"></z></grid-lanes-track> 228 <grid-lanes-track><x></x></grid-lanes-track> 229 </div> 230 <div class="grid middle"> 231 <grid-lanes-track><y style="height:8px;"></y></grid-lanes-track> 232 <grid-lanes-track><z style="height:1px;"></z><x></x><y style="height:1px;"></y></grid-lanes-track> 233 <grid-lanes-track><x></x></grid-lanes-track> 234 </div> 235 <div class="grid middle"> 236 <grid-lanes-track><z style="height:11px;"></z></grid-lanes-track> 237 <grid-lanes-track><y style="height:9px;"></y></grid-lanes-track> 238 <grid-lanes-track><x></x></grid-lanes-track> 239 </div> 240 <div class="grid middle"> 241 <grid-lanes-track><z style="height:1px;"></z></grid-lanes-track> 242 <grid-lanes-track><x></x><y style="height:4px;"></y></grid-lanes-track> 243 <grid-lanes-track><x></x></grid-lanes-track> 244 </div> 245 <div class="grid middle"> 246 <grid-lanes-track><z style="height:11px;"></z></grid-lanes-track> 247 <grid-lanes-track><y style="height:6px;"></y></grid-lanes-track> 248 <grid-lanes-track><x></x></grid-lanes-track> 249 </div> 250 <div class="grid middle"> 251 <grid-lanes-track><z style="height:1px;"></z></grid-lanes-track> 252 <grid-lanes-track><x></x></grid-lanes-track> 253 <grid-lanes-track><x></x></grid-lanes-track> 254 </div> 255 <div class="grid middle"> 256 <grid-lanes-track><z style="height:11px;"></z></grid-lanes-track> 257 <grid-lanes-track><x></x></grid-lanes-track> 258 <grid-lanes-track><x></x><y style="height:4px;"></y></grid-lanes-track> 259 </div> 260 <div class="grid last" style="height:6px;"> 261 <grid-lanes-track><z style="height:1px;"></z></grid-lanes-track> 262 <grid-lanes-track><x></x></grid-lanes-track> 263 <grid-lanes-track><y style="height:6px;"></y></grid-lanes-track> 264 </div> 265 </div> 266 267 <div class="columns"> 268 <div class="grid first"> 269 <grid-lanes-track><x></x></grid-lanes-track> 270 <grid-lanes-track><x></x></grid-lanes-track> 271 <grid-lanes-track><x></x></grid-lanes-track> 272 </div> 273 <div class="grid middle"> 274 <grid-lanes-track><y style="height:8px;"></y></grid-lanes-track> 275 <grid-lanes-track><z style="height:8px;"></z></grid-lanes-track> 276 <grid-lanes-track><x></x></grid-lanes-track> 277 </div> 278 <div class="grid middle"> 279 <grid-lanes-track><y style="height:2px;"></y><y style="height:4px;"></y></grid-lanes-track> 280 <grid-lanes-track><z style="height:4px;"></z></grid-lanes-track> 281 <grid-lanes-track><x></x></grid-lanes-track> 282 </div> 283 <div class="grid middle"> 284 <grid-lanes-track><y style="height:6px;"></y></grid-lanes-track> 285 <grid-lanes-track><x></x></grid-lanes-track> 286 <grid-lanes-track><z style="height:8px;"></z></grid-lanes-track> 287 </div> 288 <div class="grid middle"> 289 <grid-lanes-track><x></x></grid-lanes-track> 290 <grid-lanes-track><y style="height:8px;"></y></grid-lanes-track> 291 <grid-lanes-track><z style="height:4px;"></z></grid-lanes-track> 292 </div> 293 <div class="grid middle"> 294 <grid-lanes-track><x></x><y style="height:1px;"></y></grid-lanes-track> 295 <grid-lanes-track><y style="height:2px;"></y></grid-lanes-track> 296 <grid-lanes-track><x></x></grid-lanes-track> 297 </div> 298 <div class="grid middle"> 299 <grid-lanes-track><y style="height:8px;"></y></grid-lanes-track> 300 <grid-lanes-track><z style="height:8px;"></z></grid-lanes-track> 301 <grid-lanes-track><x></x></grid-lanes-track> 302 </div> 303 <div class="grid middle"> 304 <grid-lanes-track><y style="height:1px;"></y><x></x></grid-lanes-track> 305 <grid-lanes-track><z style="height:4px;"></z></grid-lanes-track> 306 <grid-lanes-track><x></x></grid-lanes-track> 307 </div> 308 <div class="grid middle"> 309 <grid-lanes-track><z style="height:8px;"></z></grid-lanes-track> 310 <grid-lanes-track><x></x></grid-lanes-track> 311 <grid-lanes-track><x></x><y style="height:1px;"></y></grid-lanes-track> 312 </div> 313 <div class="grid middle"> 314 <grid-lanes-track><z style="height:4px;"></z></grid-lanes-track> 315 <grid-lanes-track><x></x></grid-lanes-track> 316 <grid-lanes-track><y style="height:8px;"></y></grid-lanes-track> 317 </div> 318 <div class="grid last" style="height:1px;"> 319 <grid-lanes-track></grid-lanes-track> 320 <grid-lanes-track></grid-lanes-track> 321 <grid-lanes-track><y style="height:1px;"></y></grid-lanes-track> 322 </div> 323 </div> 324 <script> 325 let elts = document.querySelectorAll(".columns"); 326 let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ]; 327 for (let i = 0; i < heights.length; ++i) { 328 elts[i].style.height = heights[i] + "px"; 329 } 330 </script> 331 </wrapper> 332 </body> 333 </html>