descendant-static-position-004-ref.html (1989B)
1 <!DOCTYPE html> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</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: center; 16 padding: 2px 4px 6px 1px; 17 direction: rtl; 18 margin-left: 40px; 19 } 20 .absolute { 21 position: absolute; 22 grid-column: 1 / 2; 23 } 24 .content { 25 float: right; 26 width: 20px; 27 height: 40px; 28 background: green; 29 } 30 .content:nth-child(2) { 31 background: grey; 32 } 33 34 </style></head> 35 <body> 36 There should be no red: 37 38 <div class="grid"> 39 <div class="absolute" style="margin-top:2px"> 40 <div class="content"></div> 41 <div class="content"></div> 42 </div> 43 </div> 44 45 <div class="grid" style="grid-template-columns: 44px"> 46 <div class="absolute" style="margin-top:2px; margin-left:4px"> 47 <div class="content"></div> 48 <div class="content"></div> 49 </div> 50 </div> 51 52 <div class="grid" style="grid-template-columns: 44px"> 53 <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:2px"> 54 <div class="content"></div> 55 <div class="content"></div> 56 </div> 57 </div> 58 59 <div class="grid" style="padding-bottom: 14px"> 60 <div class="absolute" style="margin-top:10px"> 61 <div class="content"></div> 62 <div class="content"></div> 63 </div> 64 </div> 65 66 <div class="grid" style="grid-template-columns: 43px; padding-right:8px"> 67 <div class="absolute" style="margin-top:2px; margin-left:3px"> 68 <div class="content"></div> 69 <div class="content"></div> 70 </div> 71 </div> 72 73 <div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px"> 74 <div class="absolute" style="margin-top:2px;"> 75 <div class="content"></div> 76 <div class="content"></div> 77 </div> 78 </div> 79 80 </body> 81 </html>