vlr-grid-placement-auto-row-sparse-001-ref.html (3755B)
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-lr; 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 .e { 46 inset-block-start: 20px; 47 inset-inline-start: 0px; 48 } 49 .test1 .d2 { 50 inset-block-start: 0px; 51 inset-inline-start: 40px; 52 } 53 54 .test2 .a { 55 inset-block-start: 0; 56 inset-inline-start: 20px; 57 inline-size: 60px; 58 block-size: 20px; 59 } 60 .test2 .b { 61 inset-block-start: 20px; 62 inset-inline-start: 20px; 63 inline-size: 20px; 64 block-size: 20px; 65 } 66 .test2 .c { 67 inset-block-start: 0; 68 inset-inline-start: 80px; 69 inline-size: 60px; 70 block-size: 40px; 71 } 72 .test2 .e { 73 inset-block-start: 20px; 74 inset-inline-start: 0px; 75 } 76 .test2 .d2 { 77 inset-block-start: 20px; 78 inset-inline-start: 40px; 79 } 80 81 .test3 .a { 82 inset-block-start: 0; 83 inset-inline-start: 0; 84 inline-size: 60px; 85 block-size: 40px; 86 } 87 .test3 .b { 88 inset-block-start: 40px; 89 inset-inline-start: 20px; 90 inline-size: 60px; 91 block-size: 20px; 92 } 93 .test3 .c { 94 inset-block-start: 60px; 95 inset-inline-start: 0px; 96 inline-size: 60px; 97 block-size: 40px; 98 } 99 .test3 .d { inset-block-start: 60px; inset-inline-start:60px; } 100 .test3 .e { 101 inset-block-start: 20px; 102 inset-inline-start: 60px; 103 } 104 .test3 .d2 { 105 inset-block-start: 80px; 106 inset-inline-start: 60px; 107 } 108 109 .test4 .c { 110 inset-block-start: 0; 111 inset-inline-start: 20px; 112 inline-size: 60px; 113 block-size: 40px; 114 } 115 .test4 .d { inset-block-start: 40px; } 116 .test4 .e { 117 inset-block-start: 20px; 118 inset-inline-start: 0px; 119 } 120 .test4 .d2 { 121 inset-block-start: 40px; 122 inset-inline-start: 20px; 123 } 124 125 .test5 .c { 126 inset-block-start: 20px; 127 inset-inline-start: 0; 128 inline-size: 60px; 129 block-size: 20px; 130 } 131 .test5 .e { 132 inset-block-start: 20px; 133 inset-inline-start: 60px; 134 } 135 .test5 .d2 { 136 inset-block-start: 0px; 137 inset-inline-start: 20px; 138 } 139 140 .test6 { inset-inline-start: 0px; inset-block-start: 20px;} 141 .test6d2 { 142 inset-block-start: 20px; 143 inset-inline-start: 140px; 144 } 145 .test6e { 146 inset-block-start: 20px; 147 inset-inline-start: 160px; 148 } 149 </style> 150 </head> 151 <body> 152 153 <div class="grid test1"> 154 <span class="a">a</span> 155 <span class="b">b</span> 156 <span class="c">c</span> 157 <span class="d">d</span> 158 <span class="d2">D</span> 159 <span class="e">e</span> 160 </div> 161 162 <div class="grid test2"> 163 <span class="a">a</span> 164 <span class="b">b</span> 165 <span class="c">c</span> 166 <span class="d">d</span> 167 <span class="d2">D</span> 168 <span class="e">e</span> 169 </div> 170 171 <div class="grid test3" style="block-size:100px"> 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 test4"> 181 <span class="c">c</span> 182 <span class="d">d</span> 183 <span class="d2">D</span> 184 <span class="e">e</span> 185 </div> 186 187 <div class="grid test5"> 188 <span class="c">c</span> 189 <span class="d">d</span> 190 <span class="d2">D</span> 191 <span class="e">e</span> 192 </div> 193 194 <div class="grid test1"> 195 <span class="a">a</span> 196 <span class="b">b</span> 197 <span class="c">c</span> 198 <span class="test6">d</span> 199 <span class="test6d2">D</span> 200 <span class="test6e">e</span> 201 </div> 202 203 </body> 204 </html>