row-grid-lanes-out-of-flow-001-ref.html (1649B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .container { 7 width: 900px; 8 height: 600px; 9 border: 2px solid black; 10 margin: 20px; 11 } 12 13 .grid { 14 display: grid; 15 grid-template-rows: repeat(4, 8rem); 16 grid-template-columns: 800px; 17 align-content: center; 18 position: relative; 19 height: 32rem; 20 width: 800px; 21 padding: 20px; 22 gap: 10px; 23 } 24 25 .abspos-first { 26 grid-row: span 2; 27 position: absolute; 28 top: 80px; 29 bottom: 30px; 30 left: 70px; 31 right: 440px; 32 background: blue; 33 } 34 35 .abspos-second { 36 grid-row: 4 / 5; 37 position: absolute; 38 top: 10px; 39 left: 10px; 40 width: 100px; 41 height: 60px; 42 background: red; 43 } 44 45 .abspos-third { 46 grid-row: 4 / 5; 47 position: absolute; 48 width: 50px; 49 height: 60px; 50 background: yellow; 51 align-self: end; 52 } 53 54 .fixedpos { 55 position: fixed; 56 left: 50%; 57 bottom: 0; 58 width: 80px; 59 height: 40px; 60 background: green; 61 } 62 63 .static-span-two { 64 position: absolute; 65 width: 120px; 66 height: 30px; 67 background: lightcoral; 68 border: 2px solid red; 69 grid-row: span 2; 70 } 71 </style> 72 </head> 73 <body> 74 <div class="container"> 75 <div class="grid"> 76 <div class="abspos-first"></div> 77 <div class="abspos-second"></div> 78 <div class="abspos-third"></div> 79 <div class="fixedpos"></div> 80 <div class="static-span-two"></div> 81 </div> 82 </div> 83 </body> 84 </html>