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