vrl-grid-placement-auto-row-sparse-001-ref.html (3964B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style type="text/css"> 6 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 7 html { 8 writing-mode: vertical-rl; 9 text-orientation: sideways-right; 10 } 11 12 .grid { 13 block-size: 60px; 14 border: 2px solid green; 15 position: relative; 16 } 17 18 span { 19 position: absolute; 20 background: lime; 21 border: 1px solid black; 22 box-sizing: border-box; 23 inline-size: 20px; 24 block-size: 20px; 25 } 26 27 .test1 .a { 28 inset-block-start: 0; 29 inset-inline-start: 20px; 30 inline-size: 20px; 31 block-size: 20px; 32 } 33 .test1 .b { 34 inset-block-start: 20px; 35 inset-inline-start: 20px; 36 inline-size: 60px; 37 block-size: 20px; 38 } 39 .test1 .c { 40 inset-block-start: 0; 41 inset-inline-start: 80px; 42 inline-size: 60px; 43 block-size: 40px; 44 } 45 .test1 .d { 46 inset-block-start: 0; 47 inset-inline-start: 0; 48 } 49 .test1 .e { 50 inset-block-start: 20px; 51 inset-inline-start: 0; 52 } 53 .test1 .d2 { 54 inset-block-start: 0; 55 inset-inline-start: 40px; 56 } 57 58 .test2 .a { 59 inset-block-start: 0; 60 inset-inline-start: 20px; 61 inline-size: 60px; 62 block-size: 20px; 63 } 64 .test2 .b { 65 inset-block-start: 20px; 66 inset-inline-start: 20px; 67 inline-size: 20px; 68 block-size: 20px; 69 } 70 .test2 .c { 71 inset-block-start: 0; 72 inset-inline-start: 80px; 73 inline-size: 60px; 74 block-size: 40px; 75 } 76 .test2 .d { 77 inset-block-start: 0; 78 inset-inline-start: 0; 79 } 80 .test2 .e { 81 inset-block-start: 20px; 82 inset-inline-start: 0; 83 } 84 .test2 .d2 { 85 inset-block-start: 20px; 86 inset-inline-start: 40px; 87 } 88 89 .test3 .a { 90 inset-block-start: 0; 91 inset-inline-start: 0; 92 inline-size: 60px; 93 block-size: 40px; 94 } 95 .test3 .b { 96 inset-block-start: 40px; 97 inset-inline-start: 20px; 98 inline-size: 60px; 99 block-size: 20px; 100 } 101 .test3 .c { 102 inset-block-start: 60px; 103 inset-inline-start: 0; 104 inline-size: 60px; 105 block-size: 40px; 106 } 107 .test3 .d { inset-block-start: 60px; inset-inline-start:60px; } 108 .test3 .e { 109 inset-block-start: 20px; 110 inset-inline-start: 60px; 111 } 112 .test3 .d2 { 113 inset-block-start: 80px; 114 inset-inline-start: 60px; 115 } 116 117 .test4 .c { 118 inset-block-start: 0; 119 inset-inline-start: 20px; 120 inline-size: 60px; 121 block-size: 40px; 122 } 123 .test4 .d { 124 inset-block-start: 40px; 125 inset-inline-start: 0; 126 } 127 .test4 .e { 128 inset-block-start: 20px; 129 inset-inline-start: 0px; 130 } 131 .test4 .d2 { 132 inset-block-start: 40px; 133 inset-inline-start: 20px; 134 } 135 136 .test5 .c { 137 inset-block-start: 20px; 138 inset-inline-start: 0; 139 inline-size: 60px; 140 block-size: 20px; 141 } 142 .test5 .d { 143 inset-block-start: 0; 144 inset-inline-start: 0; 145 } 146 .test5 .e { 147 inset-block-start: 20px; 148 inset-inline-start: 60px; 149 } 150 .test5 .d2 { 151 inset-block-start: 0; 152 inset-inline-start: 20px; 153 } 154 155 .test6 { 156 inset-inline-start: 0; 157 inset-block-start: 20px; 158 } 159 .test6d2 { 160 inset-block-start: 20px; 161 inset-inline-start: 140px; 162 } 163 .test6e { 164 inset-block-start: 20px; 165 inset-inline-start: 160px; 166 } 167 </style> 168 </head> 169 <body> 170 171 <div class="grid test1"> 172 <span class="a">a</span> 173 <span class="b">b</span> 174 <span class="c">c</span> 175 <span class="d">d</span> 176 <span class="d2">D</span> 177 <span class="e">e</span> 178 </div> 179 180 <div class="grid test2"> 181 <span class="a">a</span> 182 <span class="b">b</span> 183 <span class="c">c</span> 184 <span class="d">d</span> 185 <span class="d2">D</span> 186 <span class="e">e</span> 187 </div> 188 189 <div class="grid test3" style="block-size:100px"> 190 <span class="a">a</span> 191 <span class="b">b</span> 192 <span class="c">c</span> 193 <span class="d">d</span> 194 <span class="d2">D</span> 195 <span class="e">e</span> 196 </div> 197 198 <div class="grid test4"> 199 <span class="c">c</span> 200 <span class="d">d</span> 201 <span class="d2">D</span> 202 <span class="e">e</span> 203 </div> 204 205 <div class="grid test5"> 206 <span class="c">c</span> 207 <span class="d">d</span> 208 <span class="d2">D</span> 209 <span class="e">e</span> 210 </div> 211 212 <div class="grid test1"> 213 <span class="a">a</span> 214 <span class="b">b</span> 215 <span class="c">c</span> 216 <span class="test6">d</span> 217 <span class="test6d2">D</span> 218 <span class="test6e">e</span> 219 </div> 220 221 </body> 222 </html>