grid-placement-auto-row-sparse-001-ref.html (3519B)
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 sparse</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 border: 1px solid green; 25 } 26 27 x { 28 background: lime; 29 border: 1px solid black; 30 } 31 32 span { 33 position: absolute; 34 background: lime; 35 border: 1px solid black; 36 box-sizing: border-box; 37 width: 20px; 38 height: 20px; 39 } 40 41 .test1 .a { 42 top: 0; 43 left: 20px; 44 width: 20px; 45 height: 20px; 46 } 47 .test1 .b { 48 top: 20px; 49 left: 20px; 50 width: 60px; 51 height: 20px; 52 } 53 .test1 .c { 54 top: 0; 55 left: 80px; 56 width: 60px; 57 height: 40px; 58 } 59 .test1 .e { 60 top: 20px; 61 left: 0px; 62 } 63 .test1 .d2 { 64 top: 0px; 65 left: 40px; 66 } 67 68 .test2 .a { 69 top: 0; 70 left: 20px; 71 width: 60px; 72 height: 20px; 73 } 74 .test2 .b { 75 top: 20px; 76 left: 20px; 77 width: 20px; 78 height: 20px; 79 } 80 .test2 .c { 81 top: 0; 82 left: 80px; 83 width: 60px; 84 height: 40px; 85 } 86 .test2 .e { 87 top: 20px; 88 left: 0px; 89 } 90 .test2 .d2 { 91 top: 20px; 92 left: 40px; 93 } 94 95 .test3 .a { 96 top: 0; 97 left: 0; 98 width: 60px; 99 height: 40px; 100 } 101 .test3 .b { 102 top: 40px; 103 left: 20px; 104 width: 60px; 105 height: 20px; 106 } 107 .test3 .c { 108 top: 60px; 109 left: 0px; 110 width: 60px; 111 height: 40px; 112 } 113 .test3 .d { top: 60px; left:60px; } 114 .test3 .e { 115 top: 20px; 116 left: 60px; 117 } 118 .test3 .d2 { 119 top: 80px; 120 left: 60px; 121 } 122 123 .test4 .c { 124 top: 0; 125 left: 20px; 126 width: 60px; 127 height: 40px; 128 } 129 .test4 .d { top: 40px; } 130 .test4 .e { 131 top: 20px; 132 left: 0px; 133 } 134 .test4 .d2 { 135 top: 40px; 136 left: 20px; 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 .test6 { left: 0px; top: 20px;} 155 .test6d2 { 156 top: 20px; 157 left: 140px; 158 } 159 .test6e { 160 top: 20px; 161 left: 160px; 162 } 163 </style> 164 </head> 165 <body> 166 167 <div class="grid test1"> 168 <span class="a">a</span> 169 <span class="b">b</span> 170 <span class="c">c</span> 171 <span class="d">d</span> 172 <span class="d2">D</span> 173 <span class="e">e</span> 174 </div> 175 176 <div class="grid test2"> 177 <span class="a">a</span> 178 <span class="b">b</span> 179 <span class="c">c</span> 180 <span class="d">d</span> 181 <span class="d2">D</span> 182 <span class="e">e</span> 183 </div> 184 185 <div class="grid test3" style="height:100px"> 186 <span class="a">a</span> 187 <span class="b">b</span> 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 test4"> 195 <span class="c">c</span> 196 <span class="d">d</span> 197 <span class="d2">D</span> 198 <span class="e">e</span> 199 </div> 200 201 <div class="grid test5"> 202 <span class="c">c</span> 203 <span class="d">d</span> 204 <span class="d2">D</span> 205 <span class="e">e</span> 206 </div> 207 208 <div class="grid test1"> 209 <span class="a">a</span> 210 <span class="b">b</span> 211 <span class="c">c</span> 212 <span class="test6">d</span> 213 <span class="test6d2">D</span> 214 <span class="test6e">e</span> 215 </div> 216 217 <!-- bug 1229009 --> 218 <div class="grid2"> 219 <x style="grid-column: 2; grid-row: 1;">1</x> 220 <x style="grid-column: 1; grid-row: 2;">2</x> 221 <x style="grid-column: 3; grid-row: 1 / 3;">3</x> 222 <x style="grid-column: 2; grid-row: 2;">4</x> 223 </div> 224 225 </body> 226 </html>