grid-lanes-fragmentation-002-ref.html (4275B)
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 .c1 { width: 27px; } 48 .c2 { width: 37px; } 49 s { height: 10px; } 50 z { 51 background: pink; 52 height: 12px; 53 } 54 grid-lanes-track { 55 float: left; 56 height: 100%; 57 gap: 2px; 58 } 59 x,y,s,z,grid-lanes-track { display: block; } 60 grid-lanes-track > * { margin-bottom:2px; } 61 grid-lanes-track.last > :last-child { margin-bottom:0; } 62 grid-lanes-track:nth-child(1) { width: 10px; } 63 grid-lanes-track:nth-child(2) { width: 15px; margin-left:2px; } 64 grid-lanes-track:nth-child(3) { width: 20px; margin-left:2px; } 65 </style></head> 66 <body> 67 <wrapper> 68 <div class="columns"> 69 <div class="grid first"> 70 <grid-lanes-track><x></x><y class="c1"></y><x></x><y class="c1"></y><x></x></grid-lanes-track> 71 <grid-lanes-track><x></x><s></s><x></x><s style="margin-bottom:6px"></s><y class="c2" style="height:5px"></y></grid-lanes-track> 72 <grid-lanes-track><x></x><z></z><x></x><z></z></grid-lanes-track> 73 </div> 74 <div class="grid middle"> 75 <grid-lanes-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></grid-lanes-track> 76 <grid-lanes-track><y class="c2" style="height:5px"></y><z></z></grid-lanes-track> 77 <grid-lanes-track><s style="height:5px"></s><x></x><x></x><x></x><x></x><x></x><x></x></grid-lanes-track> 78 </div> 79 <div class="grid last" style="height:9px"> 80 <grid-lanes-track><y style="height:9px" class="c1"></y></grid-lanes-track> 81 <grid-lanes-track></grid-lanes-track> 82 <grid-lanes-track></grid-lanes-track> 83 </div> 84 </div> 85 86 <div class="columns"> 87 <div class="grid first"> 88 <grid-lanes-track><x></x><y class="c1"></grid-lanes-track> 89 <grid-lanes-track><x></x></grid-lanes-track> 90 <grid-lanes-track><x></x></grid-lanes-track> 91 </div> 92 <div class="grid middle"> 93 <grid-lanes-track><z></z></grid-lanes-track> 94 <grid-lanes-track><x></x><y class="c2"></y></grid-lanes-track> 95 <grid-lanes-track><x></x></grid-lanes-track> 96 </div> 97 <div class="grid middle"> 98 <grid-lanes-track><x></x><s style="height:5px"></s><y style="height:4px" class="c1"></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 class="grid middle"> 103 <grid-lanes-track><y style="height:6px" class="c1"></y><y class="c1"></y></grid-lanes-track> 104 <grid-lanes-track></grid-lanes-track> 105 <grid-lanes-track><x></x></grid-lanes-track> 106 </div> 107 <div class="grid middle"> 108 <grid-lanes-track><z></z></grid-lanes-track> 109 <grid-lanes-track><x></x><x></x></grid-lanes-track> 110 <grid-lanes-track><x></x><x></x></grid-lanes-track> 111 </div> 112 <div class="grid middle"> 113 <grid-lanes-track><z class="c1"></z><y style="height:4px" class="c1"></y></grid-lanes-track> 114 <grid-lanes-track></grid-lanes-track> 115 <grid-lanes-track><x></x><x></x></grid-lanes-track> 116 </div> 117 <div class="grid last" style="height:6px;"> 118 <grid-lanes-track><y style="height:6px" class="c1"></y></grid-lanes-track> 119 <grid-lanes-track></grid-lanes-track> 120 <grid-lanes-track></grid-lanes-track> 121 </div> 122 </div> 123 <script> 124 let elts = document.querySelectorAll(".columns"); 125 let heights = [ 48, 18 ]; 126 for (let i = 0; i < heights.length; ++i) { 127 elts[i].style.height = heights[i] + "px"; 128 } 129 </script> 130 </wrapper> 131 </body> 132 </html>