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