abs-pos-001-ref.html (2686B)
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 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: auto / repeat(10, 30px) 100px; 18 place-content: start; 19 border: 1px solid; 20 width: 500px; 21 position: relative; 22 padding: 4px 3px 1px 10px; 23 } 24 25 .subgrid { 26 display: grid; 27 grid: 0 / repeat(10, 30px) 100px; 28 background: lightgrey; 29 grid-column: 2 / span 8; 30 min-width:0; 31 min-height:0; 32 } 33 34 i { 35 grid-row: 1; 36 counter-increment: i; 37 background: pink; 38 } 39 i::before { content: counter(i, decimal); } 40 41 x { 42 position: absolute; 43 top:0; bottom:0; left:0; right:0; 44 background: silver; 45 } 46 47 .hr { writing-mode: horizontal-tb; direction:rtl; } 48 </style> 49 </head> 50 <body> 51 52 <div class="grid"> 53 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 54 <div class="subgrid"> 55 <x style="grid-column:3/5">x</x> 56 </div> 57 </div> 58 59 <div class="grid"> 60 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 61 <div class="subgrid"> 62 <x style="grid-column:3/-1">x</x> 63 </div> 64 </div> 65 66 <div class="grid"> 67 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 68 <div class="subgrid"> 69 <x style="grid-column:3">x</x> 70 </div> 71 </div> 72 73 <div class="grid"> 74 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 75 <div class="subgrid"> 76 <x style="grid-column:auto/3">x</x> 77 </div> 78 </div> 79 80 <div class="grid"> 81 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 82 <div class="subgrid"> 83 <x style="grid-column:auto/1">x</x> 84 </div> 85 </div> 86 87 <div class="grid"> 88 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 89 <div class="subgrid hr"> 90 <x style="grid-column:3/5">x</x> 91 </div> 92 </div> 93 94 <div class="grid"> 95 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 96 <div class="subgrid hr"> 97 <x style="grid-column:3/-1">x</x> 98 </div> 99 </div> 100 101 <div class="grid"> 102 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 103 <div class="subgrid hr"> 104 <x style="grid-column:3">x</x> 105 </div> 106 </div> 107 108 <div class="grid"> 109 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 110 <div class="subgrid hr"> 111 <x style="grid-column:auto/3">x</x> 112 </div> 113 </div> 114 115 <div class="grid"> 116 <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> 117 <div class="subgrid hr"> 118 <x style="grid-column:auto/1">x</x> 119 </div> 120 </div> 121 122 </body> 123 </html>