grid-lanes-fragmentation-003-ref.html (3112B)
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 axis fragmentation with column grid-lanes layout</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 21 .columns { 22 columns: 3; 23 column-fill: auto; 24 background: lightgrey; 25 margin-bottom: 15px; 26 } 27 28 .grid { 29 display: grid; 30 grid: 20px auto 30px / auto; 31 border: solid; 32 border-width: 3px 1px 7px 5px; 33 padding: 1px 3px 5px 7px; 34 gap: 1px 5px; 35 } 36 37 x { 38 background: cyan; 39 min-width: 20px; 40 min-height: 10px; 41 } 42 y { 43 background: blue; 44 width: 35px; 45 } 46 z { 47 background: gray; 48 width: 40px; 49 } 50 grid-lanes-track { 51 display: grid; 52 justify-content: start; 53 column-gap: 5px; 54 } 55 </style> 56 </head> 57 <body> 58 <wrapper style="display:none"> 59 <div class="columns" style="height:90px"> 60 <div class="grid"> 61 <grid-lanes-track><x></x><y></y><y></y><x></x></grid-lanes-track> 62 <grid-lanes-track><x></x><x></x><x></x><z></z></grid-lanes-track> 63 <grid-lanes-track><z></z><z></z><x></x><z></z></grid-lanes-track> 64 </div> 65 </div> 66 <div class="columns" style="height:68px"> 67 <div class="grid"> 68 <grid-lanes-track><x></x><y></y><y></y><x></x></grid-lanes-track> 69 <grid-lanes-track><x></x><x></x><x></x><z></z></grid-lanes-track> 70 <grid-lanes-track><z></z><z></z><x></x><z></z></grid-lanes-track> 71 </div> 72 </div> 73 <div class="columns" style="height:48px"> 74 <div class="grid"> 75 <grid-lanes-track><x></x><y></y><y></y><x></x></grid-lanes-track> 76 <grid-lanes-track><x></x><x></x><x></x><z></z></grid-lanes-track> 77 <grid-lanes-track><z></z><z></z><x></x><z></z></grid-lanes-track> 78 </div> 79 </div> 80 <div class="columns" style="height:38px"> 81 <div class="grid"> 82 <grid-lanes-track><x></x><y></y><y></y><x></x></grid-lanes-track> 83 <grid-lanes-track><x></x><x></x><x></x><z></z></grid-lanes-track> 84 <grid-lanes-track><z></z><z></z><x></x><z></z></grid-lanes-track> 85 </div> 86 </div> 87 <div class="columns" style="height:28px"> 88 <div class="grid"> 89 <grid-lanes-track><x></x><y></y><y></y><x></x></grid-lanes-track> 90 <grid-lanes-track><x></x><x></x><x></x><z></z></grid-lanes-track> 91 <grid-lanes-track><z></z><z></z><x></x><z></z></grid-lanes-track> 92 </div> 93 </div> 94 <div class="columns" style="height:18px"> 95 <div class="grid"> 96 <grid-lanes-track><x></x><y></y><y></y><x></x></grid-lanes-track> 97 <grid-lanes-track><x></x><x></x><x></x><z></z></grid-lanes-track> 98 <grid-lanes-track><z></z><z></z><x></x><z></z></grid-lanes-track> 99 </div> 100 </div> 101 </wrapper> 102 103 <script> 104 let wrapper = document.querySelectorAll("wrapper")[0]; 105 let grids = document.querySelectorAll(".grid"); 106 for (let e of grids) { 107 for (let track of e.children) { 108 track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)"; 109 } 110 } 111 wrapper.style.display=""; 112 </script> 113 </body> 114 </html>