column-grid-lanes-out-of-flow-002.html (1834B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Grid Lanes Test: Grid Lanes layout out-of-flow positioning</title> 6 <link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-3/#abspos"> 8 <link rel="match" href="column-grid-lanes-out-of-flow-002-ref.html"> 9 <style> 10 .container { 11 width: 300px; 12 height: 150px; 13 border: 2px solid black; 14 margin: 20px; 15 } 16 17 .grid-lanes { 18 display: grid-lanes; 19 grid-template-columns: repeat(4, 60px); 20 border: 1px solid blue; 21 padding: 10px; 22 gap: 5px; 23 position: relative; 24 } 25 26 .item { 27 background: lightblue; 28 padding: 5px; 29 height: 100px; 30 } 31 32 .wrapper { 33 background: lightgreen; 34 padding: 5px; 35 height: 60px; 36 border: 1px dashed green; 37 } 38 39 .absolute { 40 position: absolute; 41 background: red; 42 grid-column: 1 / 2; 43 top: 30px; 44 width: 20px; 45 height: 20px; 46 } 47 48 .static-pos-with-grid-column { 49 position: absolute; 50 background: yellow; 51 grid-column: 2 / 3; 52 width: 10px; 53 height: 10px; 54 } 55 56 .static-pos { 57 position: absolute; 58 background: orange; 59 width: 10px; 60 height: 10px; 61 } 62 </style> 63 </head> 64 <body> 65 <div class="container"> 66 <div class="grid-lanes"> 67 <div class="item"> 68 <div class="wrapper"> 69 <div class="absolute"></div> 70 </div> 71 </div> 72 <div class="item"> 73 <div class="wrapper"> 74 <div class="static-pos-with-grid-column"></div> 75 </div> 76 </div> 77 <div class="item"> 78 <div class="static-pos"></div> 79 </div> 80 <div class="item"></div> 81 </div> 82 </div> 83 </body> 84 </html>