descendant-static-position-001-ref.html (1672B)
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: 20px; 15 padding: 2px 4px 6px 1px; 16 } 17 .absolute { 18 position: absolute; 19 grid-column: 1 / 2; 20 } 21 .content { 22 float: left; 23 width: 20px; 24 height: 40px; 25 background: green; 26 } 27 .content:nth-child(2) { 28 background: grey; 29 } 30 31 </style></head> 32 <body> 33 There should be no red: 34 35 <div class="grid"> 36 <div class="absolute" style="margin-top:2px"> 37 <div class="content"></div> 38 <div class="content"></div> 39 </div> 40 </div> 41 42 <div class="grid" style="grid-template-columns: 43px"> 43 <div class="absolute" style="margin-top:2px; margin-left:3px"> 44 <div class="content"></div> 45 <div class="content"></div> 46 </div> 47 </div> 48 49 <div class="grid" style="grid-template-columns: 43px"> 50 <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px"> 51 <div class="content"></div> 52 <div class="content"></div> 53 </div> 54 </div> 55 56 <div class="grid" style="padding-bottom: 14px"> 57 <div class="absolute" style="margin-top:10px"> 58 <div class="content"></div> 59 <div class="content"></div> 60 </div> 61 </div> 62 63 <div class="grid" style="grid-template-columns: 43px; padding-left:8px"> 64 <div class="absolute" style="margin-top:2px; margin-left:3px"> 65 <div class="content"></div> 66 <div class="content"></div> 67 </div> 68 </div> 69 70 </body> 71 </html>