grid-lanes-fragmentation-002.html (1840B)
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-002-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 grid-column: span 2; 46 background: blue; 47 height: 10px; 48 break-inside: auto; 49 } 50 x:nth-child(5n) { 51 background: pink; 52 height: 12px; 53 break-inside: avoid; 54 } 55 </style></head> 56 <body> 57 <wrapper style="display:none"> 58 <div style="display:none"> 59 <div class="columns"> 60 <div class="grid"> 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 <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x> 63 </div> 64 </div> 65 </div> 66 <script> 67 let wrapper = document.querySelectorAll("wrapper")[0]; 68 let tmplt = document.querySelectorAll(".columns")[0]; 69 let heights = [ 48, 18 ]; 70 for (let h of heights) { 71 let e = tmplt.cloneNode(true); 72 e.style.height = h + "px"; 73 wrapper.appendChild(e); 74 } 75 wrapper.style.display=""; 76 </script> 77 </wrapper> 78 </body> 79 </html>