grid-clamping-002-ref.html (1737B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Reference: Clamp number of auto-fill tracks</title> 5 <style type="text/css"> 6 html,body { color:black; background-color:white; font-size:16px; padding:0; margin:0; } 7 8 .grid { 9 position: fixed; 10 bottom: 0; 11 display: grid; 12 grid-template-rows: 10000px; 13 grid-auto-rows: 1px; 14 grid-auto-columns: 10px; 15 border: 1px solid; 16 } 17 18 x { 19 position: absolute; 20 grid-row-start: span 2; 21 top:0; bottom:0; left:10px; width:20px; 22 background: grey; 23 } 24 </style> 25 </head> 26 <body> 27 28 <div class="grid"> 29 <span style="background:yellow"></span> 30 <span style="background:lime"></span> 31 <span style="background:blue"></span> 32 <span style="background:lime"></span> 33 <span style="background:blue"></span> 34 <x></x> 35 </div> 36 37 <div class="grid" style="left:50px"> 38 <span style="background:yellow"></span> 39 <span style="background:lime"></span> 40 <span style="background:blue"></span> 41 <span style="background:lime"></span> 42 <x></x> 43 </div> 44 45 <div class="grid" style="left:100px"> 46 <span style="background:yellow"></span> 47 <span style="background:lime"></span> 48 <span style="background:blue"></span> 49 <x></x> 50 </div> 51 52 <div class="grid" style="left:150px"> 53 <span style="background:yellow"></span> 54 <span style="background:yellow"></span> 55 <span style="background:yellow"></span> 56 <x></x> 57 </div> 58 59 <div class="grid" style="left:200px"> 60 <span style="background:yellow"></span> 61 <span style="background:yellow"></span> 62 <span style="background:yellow"></span> 63 <x></x> 64 </div> 65 66 67 </body> 68 </html>