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