| <!DOCTYPE HTML> |
| <!-- |
| Any copyright is dedicated to the Public Domain. |
| http://creativecommons.org/publicdomain/zero/1.0/ |
| --> |
| <html><head> |
| <meta charset="utf-8"> |
| <title>Reference: Masonry layout fragmentation</title> |
| <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> |
| <style> |
| html,body { |
| color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; |
| } |
| wrapper { |
| display: block; |
| width: 600px; |
| height: 600px; |
| overflow: hidden; |
| } |
| .columns { |
| width: 330px; |
| columns: 6; |
| column-fill: auto; |
| column-gap: 1px; |
| background-color: rgba(80,80,80,.2); |
| margin-bottom: 10px; |
| } |
| .columns:nth-child(2n) { |
| background-color: rgba(10,100,10,.5); |
| } |
| .grid { |
| display: flow-root; |
| border: 1px solid; |
| gap: 2px; |
| } |
| .first { border-bottom-width:0; height:calc(100% - 1px); } |
| .middle { border-top-width:0; border-bottom-width:0; height:100%; } |
| .last { border-top-width:0; } |
| x { |
| background: cyan; |
| height: 5px; |
| } |
| y { |
| background: blue; |
| height: 10px; |
| } |
| .c1 { width: 27px; } |
| .c2 { width: 37px; } |
| s { height: 10px; } |
| z { |
| background: pink; |
| height: 12px; |
| } |
| masonry-track { |
| float: left; |
| height: 100%; |
| gap: 2px; |
| } |
| x,y,s,z,masonry-track { display: block; } |
| masonry-track > * { margin-bottom:2px; } |
| masonry-track.last > :last-child { margin-bottom:0; } |
| masonry-track:nth-child(1) { width: 10px; } |
| masonry-track:nth-child(2) { width: 15px; margin-left:2px; } |
| masonry-track:nth-child(3) { width: 20px; margin-left:2px; } |
| </style></head> |
| <body> |
| <wrapper> |
| <div class="columns"> |
| <div class="grid first"> |
| <masonry-track><x></x><y class="c1"></y><x></x><y class="c1"></y><x></x></masonry-track> |
| <masonry-track><x></x><s></s><x></x><s style="margin-bottom:6px"></s><y class="c2" style="height:5px"></y></masonry-track> |
| <masonry-track><x></x><z></z><x></x><z></z></masonry-track> |
| </div> |
| <div class="grid middle"> |
| <masonry-track><x></x><x></x><s style="height:5px"></s><y class="c1"></y><z class="c1"></z><y class="c1" style="height:1px"></y></masonry-track> |
| <masonry-track><y class="c2" style="height:5px"></y><z></z></masonry-track> |
| <masonry-track><s style="height:5px"></s><x></x><x></x><x></x><x></x><x></x><x></x></masonry-track> |
| </div> |
| <div class="grid last" style="height:9px"> |
| <masonry-track><y style="height:9px" class="c1"></y></masonry-track> |
| <masonry-track></masonry-track> |
| <masonry-track></masonry-track> |
| </div> |
| </div> |
| |
| <div class="columns"> |
| <div class="grid first"> |
| <masonry-track><x></x><y class="c1"></masonry-track> |
| <masonry-track><x></x></masonry-track> |
| <masonry-track><x></x></masonry-track> |
| </div> |
| <div class="grid middle"> |
| <masonry-track><z></z></masonry-track> |
| <masonry-track><x></x><y class="c2"></y></masonry-track> |
| <masonry-track><x></x></masonry-track> |
| </div> |
| <div class="grid middle"> |
| <masonry-track><x></x><s style="height:5px"></s><y style="height:4px" class="c1"></y></masonry-track> |
| <masonry-track><z></z></masonry-track> |
| <masonry-track><x></x><x></x></masonry-track> |
| </div> |
| <div class="grid middle"> |
| <masonry-track><y style="height:6px" class="c1"></y><y class="c1"></y></masonry-track> |
| <masonry-track></masonry-track> |
| <masonry-track><x></x></masonry-track> |
| </div> |
| <div class="grid middle"> |
| <masonry-track><z></z></masonry-track> |
| <masonry-track><x></x><x></x></masonry-track> |
| <masonry-track><x></x><x></x></masonry-track> |
| </div> |
| <div class="grid middle"> |
| <masonry-track><z class="c1"></z><y style="height:4px" class="c1"></y></masonry-track> |
| <masonry-track></masonry-track> |
| <masonry-track><x></x><x></x></masonry-track> |
| </div> |
| <div class="grid last" style="height:6px;"> |
| <masonry-track><y style="height:6px" class="c1"></y></masonry-track> |
| <masonry-track></masonry-track> |
| <masonry-track></masonry-track> |
| </div> |
| </div> |
| <script> |
| let elts = document.querySelectorAll(".columns"); |
| let heights = [ 48, 18 ]; |
| for (let i = 0; i < heights.length; ++i) { |
| elts[i].style.height = heights[i] + "px"; |
| } |
| </script> |
| </wrapper> |
| </body> |
| </html> |
