grid-lanes-fragmentation-001.html (1848B)
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>CSS Grid Test: Grid Lanes layout fragmentation</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-3"> 11 <link rel="match" href="grid-lanes-fragmentation-001-ref.html"> 12 <style> 13 html,body { 14 color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0; 15 } 16 wrapper { 17 display: block; 18 width: 600px; 19 height: 600px; 20 overflow: hidden; 21 } 22 .columns { 23 width: 330px; 24 columns: 6; 25 column-fill: auto; 26 column-gap: 1px; 27 background-color: rgba(80,80,80,.2); 28 margin-bottom: 10px; 29 } 30 .columns:nth-child(2n) { 31 background-color: rgba(10,100,10,.5); 32 } 33 .grid { 34 display: grid-lanes; 35 grid-template-columns: 10px 15px 20px; 36 border: 1px solid; 37 gap: 2px; 38 } 39 x { 40 background: cyan; 41 height: 5px; 42 break-inside: avoid; 43 } 44 x:nth-child(4n) { 45 background: blue; 46 height: 10px; 47 break-inside: auto; 48 } 49 x:nth-child(5n) { 50 background: pink; 51 height: 12px; 52 break-inside: avoid; 53 } 54 </style></head> 55 <body> 56 <wrapper style="display:none"> 57 <div style="display:none"> 58 <div class="columns"> 59 <div class="grid"> 60 <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> 61 <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> 62 </div> 63 </div> 64 </div> 65 <script> 66 let wrapper = document.querySelectorAll("wrapper")[0]; 67 let tmplt = document.querySelectorAll(".columns")[0]; 68 let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ]; 69 for (let h of heights) { 70 let e = tmplt.cloneNode(true); 71 e.style.height = h + "px"; 72 wrapper.appendChild(e); 73 } 74 wrapper.style.display=""; 75 </script> 76 </wrapper> 77 </body> 78 </html>