grid-clamping-001-ref.html (1622B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Reference: bug 1229999</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:blue"></span> 33 <x></x> 34 </div> 35 36 <div class="grid" style="left:50px"> 37 <span style="background:yellow"></span> 38 <span style="background:lime"></span> 39 <span style="background:blue"></span> 40 <x></x> 41 </div> 42 43 <div class="grid" style="left:100px"> 44 <span style="background:yellow"></span> 45 <span style="background:yellow"></span> 46 <span style="background:blue"></span> 47 <x></x> 48 </div> 49 50 <div class="grid" style="left:150px"> 51 <span style="background:yellow"></span> 52 <span style="background:yellow"></span> 53 <span style="background:blue"></span> 54 <x></x> 55 </div> 56 57 <div class="grid" style="left:200px"> 58 <span style="background:yellow"></span> 59 <span style="background:yellow"></span> 60 <span style="background:blue"></span> 61 <x></x> 62 </div> 63 64 65 </body> 66 </html>