grid-lanes-fragmentation-003.html (1710B)
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 axis fragmentation with column grid-lanes layout</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-003-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 23 .columns { 24 columns: 3; 25 column-fill: auto; 26 background: lightgrey; 27 margin-bottom: 15px; 28 } 29 30 .grid { 31 display: grid-lanes; 32 grid-lanes-direction: row; 33 grid: 20px auto 30px / none; 34 border: solid; 35 border-width: 3px 1px 7px 5px; 36 padding: 1px 3px 5px 7px; 37 gap: 1px 5px; 38 } 39 40 .grid > * { 41 background: cyan; 42 min-width: 20px; 43 min-height: 10px; 44 } 45 .grid > :nth-child(4n) { 46 background: blue; 47 width: 35px; 48 } 49 .grid > :nth-child(3n) { 50 background: gray; 51 width: 40px; 52 } 53 </style> 54 </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 </div> 62 </div> 63 </div> 64 <script> 65 let wrapper = document.querySelectorAll("wrapper")[0]; 66 let tmplt = document.querySelectorAll(".columns")[0]; 67 let heights = [ 90, 68, 48, 38, 28, 18 ]; 68 for (let h of heights) { 69 let e = tmplt.cloneNode(true); 70 e.style.height = h + "px"; 71 wrapper.appendChild(e); 72 } 73 wrapper.style.display=""; 74 </script> 75 </wrapper> 76 </body> 77 </html>