abs-pos-002-ref.html (2803B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: grid-aligned abs.pos. inside rel.pos. subgrid</title> 9 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 10 <style> 11 html,body { 12 color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0; 13 } 14 15 .grid { 16 display: grid; 17 grid: repeat(4, auto) / repeat(10, 30px) 100px; 18 place-content: start; 19 border: 1px solid; 20 width: 500px; 21 padding: 1px 2px; 22 } 23 24 .subgrid { 25 position: relative; 26 display: grid; 27 grid: auto / 27px repeat(7, 30px); 28 grid-column: 2 / span 8; 29 grid-row: 2 / span 2; 30 padding: 4px 0 1px 0; 31 border: 3px solid black; 32 min-height: 1em; 33 background: yellow; 34 } 35 36 i { 37 grid-row: 1; 38 counter-increment: i; 39 background: pink; 40 } 41 i::before { content: counter(i, decimal); } 42 43 x { 44 position: absolute; 45 top:0; bottom:0; left:0; right:0; 46 background: silver; 47 } 48 49 .hr { writing-mode: horizontal-tb; direction:rtl; } 50 </style> 51 </head> 52 <body> 53 54 <div class="grid"> 55 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 56 <div class="subgrid"> 57 <x style="grid-column:3/5">x</x> 58 </div> 59 </div> 60 61 <div class="grid"> 62 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 63 <div class="subgrid"> 64 <x style="grid-column:3; right:33px">x</x> 65 </div> 66 </div> 67 68 <div class="grid"> 69 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 70 <div class="subgrid"> 71 <x style="grid-column:3">x</x> 72 </div> 73 </div> 74 75 <div class="grid"> 76 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 77 <div class="subgrid"> 78 <x style="grid-column:auto/3">x</x> 79 </div> 80 </div> 81 82 <div class="grid"> 83 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 84 <div class="subgrid"> 85 <x style="grid-column:auto/1; right:-10px">x</x> 86 </div> 87 </div> 88 89 <div class="grid"> 90 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 91 <div class="subgrid hr"> 92 <x style="grid-column:3/5">x</x> 93 </div> 94 </div> 95 96 <div class="grid"> 97 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 98 <div class="subgrid hr"> 99 <x style="grid-column:3/-1; left:13px">x</x> 100 </div> 101 </div> 102 103 <div class="grid"> 104 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 105 <div class="subgrid hr"> 106 <x style="grid-column:3">x</x> 107 </div> 108 </div> 109 110 <div class="grid"> 111 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 112 <div class="subgrid hr"> 113 <x style="grid-column:auto/3">x</x> 114 </div> 115 </div> 116 117 <div class="grid"> 118 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 119 <div class="subgrid hr"> 120 <x style="grid-column:auto/1; left:-33px">x</x> 121 </div> 122 </div> 123 124 </body> 125 </html>