grid-placement-auto-row-dense-001.html (3788B)
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>CSS Test: 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 <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo"> 11 <link rel="match" href="grid-placement-auto-row-dense-001-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 border: 1px solid green; 18 grid-template-columns: 20px 20px 20px 20px; 19 grid-template-rows: 20px 20px 20px; 20 grid-auto-flow: dense row; 21 grid-auto-columns: 20px; 22 grid-auto-rows: 20px; 23 } 24 25 .grid2 { 26 display: grid; 27 grid-auto-columns: 20px; 28 grid-auto-rows: 20px; 29 grid-auto-flow: row dense; 30 border: 1px solid green; 31 } 32 33 span { 34 background: lime; 35 border: 1px solid; 36 } 37 38 .test1 .a { 39 grid-row: 1; 40 grid-column: 2 / span 1; 41 } 42 .test1 .b { 43 grid-row: 2; 44 grid-column: 2 / span 3; 45 } 46 .test1 .c, .test2 .c { 47 grid-row: 1 / span 2; 48 grid-column: auto / span 3; 49 } 50 51 .test2 .a { 52 grid-row: 1; 53 grid-column: 2 / span 3; 54 } 55 .test2 .b { 56 grid-row: 2; 57 grid-column: 2 / span 1; 58 } 59 60 .test3 { 61 grid-template-areas: 62 'a a a . ' 63 'a a a . ' 64 '. b b . ' 65 ; 66 } 67 .test3 .a { 68 grid-area: a; 69 } 70 .test3 .b { 71 grid-column: 2 / span 3; 72 grid-row: b; 73 } 74 .test3 .c { 75 grid-row: auto / span 2; 76 grid-column: auto / span 3; 77 } 78 79 .test4 .c { 80 grid-row: auto / span 2; 81 grid-column: auto / span 3; 82 } 83 84 .test5 .c { 85 grid-row-start: 2; 86 grid-column: auto / span 3; 87 } 88 89 .test6 { 90 grid-column: auto / span X; 91 } 92 93 .e { 94 grid-row-start: 2; 95 grid-column: auto / span 1; 96 } 97 </style> 98 </head> 99 <body> 100 101 <div class="grid test1"> 102 <span class="a">a</span> 103 <span class="b">b</span> 104 <span class="c">c</span> 105 <span class="d">d</span> 106 <span class="d">D</span> 107 <span class="e">e</span> 108 </div> 109 110 <div class="grid test2"> 111 <span class="a">a</span> 112 <span class="b">b</span> 113 <span class="c">c</span> 114 <span class="d">d</span> 115 <span class="d">D</span> 116 <span class="e">e</span> 117 </div> 118 119 <div class="grid test3"> 120 <span class="a">a</span> 121 <span class="b">b</span> 122 <span class="c">c</span> 123 <span class="d">d</span> 124 <span class="d">D</span> 125 <span class="e">e</span> 126 </div> 127 128 <div class="grid test4"> 129 <span class="c">c</span> 130 <span class="d">d</span> 131 <span class="d">D</span> 132 <span class="e">e</span> 133 </div> 134 135 <div class="grid test5"> 136 <span class="c">c</span> 137 <span class="d">d</span> 138 <span class="d">D</span> 139 <span class="e">e</span> 140 </div> 141 142 <div class="grid test1"> 143 <span class="a">a</span> 144 <span class="b">b</span> 145 <span class="c">c</span> 146 <span class="test6">d</span> 147 <span class="test6">D</span> 148 <span class="e">e</span> 149 </div> 150 151 <!-- bug 1228984 test 2 --> 152 <div class="grid2"> 153 <span style="grid-row: 1 / 3">1</span> 154 <span style="grid-row: 2 / 4">2</span> 155 <span style="grid-row: 1 / 4">3</span> 156 <span style="">4</span> 157 <span style="">5</span> 158 </div> 159 160 <!-- bug 1228984 test 1: with "row dense" --> 161 <div class="grid2"> 162 <span style="grid-column: 1; grid-row: 1 / 3">1</span> 163 <span style="grid-column: 2; grid-row: 1">2</span> 164 <span style="grid-row: span 2">3</span> 165 <span style="grid-row: 2">4</span> 166 </div> 167 168 <!-- bug 1228984 test 2 --> 169 <div class="grid2"> 170 <span style="grid-column: 1 / 3; grid-row: 1;">1</span> 171 <span style="grid-column: 1; grid-row: 2;">2</span> 172 <span style="grid-column: span 2;">3</span> 173 <span style="grid-column: 2;">4</span> 174 </div> 175 176 <!-- bug 1228984 test 3 --> 177 <div class="grid2"> 178 <span style="grid-row: 1 / 3">1</span> 179 <span style="grid-row: 2 / 4">2</span> 180 <span style="grid-row: 1 / 4">3</span> 181 <span style="">4</span> 182 <span style="">5</span> 183 </div> 184 185 186 </body> 187 </html>