line-names-012-ref.html (4472B)
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: subgrid line names do not apply to non-subgrids</title> 9 <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 11 <style> 12 html,body { 13 color:black; background-color:white; font:12px/1 monospace; 14 } 15 16 .grid { 17 display: grid; 18 grid: 0.2em 1.4em / repeat(10,30px); 19 border: 1px solid; 20 padding: 0 2px; 21 } 22 23 div > div { 24 xposition: relative; 25 display: grid; 26 grid: auto / subgrid; 27 border: 1px solid black; 28 background: grey; 29 } 30 31 n { 32 grid-row: 1; 33 counter-increment: n; 34 } 35 n::before { content: counter(n, decimal); } 36 37 x { 38 background: silver; 39 } 40 41 .hr { writing-mode: horizontal-tb; direction:rtl; } 42 </style> 43 </head> 44 <body> 45 46 <div class="grid"> 47 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 48 <div style="grid-column: 2 / span 2;"> 49 <div style="grid-column: 1;"> 50 <x style="grid-column: 1;">x</x> 51 </div> 52 </div> 53 </div> 54 55 <div class="grid"> 56 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 57 <div style="grid-column: 2 / span 2;"> 58 <div style="grid-column: 1;"> 59 <x style="grid-column: 1;">x</x> 60 </div> 61 </div> 62 </div> 63 64 <div class="grid"> 65 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 66 <div style="grid-column: 2 / 7;"> 67 <div style="grid-column: 3 / 5;"> 68 <x style="grid-column: 2;">x</x> 69 </div> 70 </div> 71 </div> 72 73 <div class="grid"> 74 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 75 <div style="grid-column: 2 / 4;"> 76 <div style="grid-column: 1 / 2;"> 77 <x style="grid-column: 1 / 2;">x</x> 78 </div> 79 </div> 80 </div> 81 82 <div class="grid"> 83 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 84 <div style="grid-column: 2 / 4;"> 85 <div style="grid-column: 1 / 2;"> 86 <x style="grid-column: 1 / 2;">x</x> 87 </div> 88 </div> 89 </div> 90 91 <div class="grid"> 92 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 93 <div style="grid-column: 2 / 7;"> 94 <div style="grid-column: 3 / 5;"> 95 <x style="grid-column: 1 / 2;">x</x> 96 </div> 97 </div> 98 </div> 99 100 <div class="grid"> 101 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 102 <div style="grid-column: 2 / 7;"> 103 <div style="grid-column: 3 / 5;"> 104 <x style="grid-column: 2 / 3;">x</x> 105 </div> 106 </div> 107 </div> 108 109 <div class="grid"> 110 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 111 <div style="grid-column: 2 / 7;"> 112 <div style="grid-column: 3 / 5;"> 113 <x style="grid-column: 1 / 2;">x</x> 114 </div> 115 </div> 116 </div> 117 118 <div class="grid"> 119 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 120 <div style="grid-column: 2 / 7;"> 121 <div style="grid-column: 3 / 5;"> 122 <x style="grid-column: 2 / 3;">x</x> 123 </div> 124 </div> 125 </div> 126 127 <div class="grid"> 128 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 129 <div style="grid-column: 2 / 7;"> 130 <div style="grid-column: 3 / 5;"> 131 <x style="grid-column: 1 / 2;">x</x> 132 </div> 133 </div> 134 </div> 135 136 <div class="grid"> 137 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 138 <div style="grid-column: 2 / 7;"> 139 <div style="grid-column: 3 / 5;"> 140 <x style="grid-column: 2 / 3;">x</x> 141 </div> 142 </div> 143 </div> 144 145 <div class="grid"> 146 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 147 <div style="grid-column: 2 / 7;"> 148 <div style="grid-column: 3 / 5;"> 149 <x style="grid-column: 1 / 2;">x</x> 150 </div> 151 </div> 152 </div> 153 154 <div class="grid"> 155 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 156 <div style="grid-column: 2 / 7;"> 157 <div style="grid-column: 3 / 5;"> 158 <x style="grid-column: 2 / 3;">x</x> 159 </div> 160 </div> 161 </div> 162 163 <div class="grid"> 164 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 165 <div style="grid-column: 2 / 5;"> 166 <div style="grid-column: 1 / 3;"> 167 <x style="grid-column: 1 / 2;">x</x> 168 </div> 169 </div> 170 </div> 171 172 <div class="grid"> 173 <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n> 174 <div style="grid-column: 2 / 5;"> 175 <div style="grid-column: 1 / 3;"> 176 <x style="grid-column: 2 / 3;">x</x> 177 </div> 178 </div> 179 </div> 180 </body> 181 </html>