descendant-static-position-003-ref.html (1697B)
1 <!DOCTYPE html> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Reference: Grid aligned descendants with static position</title> 5 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 6 <style> 7 .grid { 8 position: relative; 9 display: grid; 10 grid: 40px / 40px; 11 border: 2px solid; 12 border-top-width: 5px; 13 border-left-width: 3px; 14 width: 100px; 15 justify-content: end; 16 padding: 2px 4px 6px 1px; 17 } 18 .absolute { 19 position: absolute; 20 grid-column: 1 / 2; 21 } 22 .content { 23 float: left; 24 width: 20px; 25 height: 40px; 26 background: green; 27 } 28 .content:nth-child(2) { 29 background: grey; 30 } 31 32 </style></head> 33 <body> 34 There should be no red: 35 36 <div class="grid"> 37 <div class="absolute" style="margin-top:2px"> 38 <div class="content"></div> 39 <div class="content"></div> 40 </div> 41 </div> 42 43 <div class="grid" style="grid-template-columns: 43px"> 44 <div class="absolute" style="margin-top:2px; margin-left:3px"> 45 <div class="content"></div> 46 <div class="content"></div> 47 </div> 48 </div> 49 50 <div class="grid" style="grid-template-columns: 43px"> 51 <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px"> 52 <div class="content"></div> 53 <div class="content"></div> 54 </div> 55 </div> 56 57 <div class="grid" style="padding-bottom: 14px"> 58 <div class="absolute" style="margin-top:10px"> 59 <div class="content"></div> 60 <div class="content"></div> 61 </div> 62 </div> 63 64 <div class="grid" style="grid-template-columns: 43px; padding-left:8px"> 65 <div class="absolute" style="margin-top:2px; margin-left:3px"> 66 <div class="content"></div> 67 <div class="content"></div> 68 </div> 69 </div> 70 71 </body> 72 </html>