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