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