grid-placement-auto-row-sparse-001.html (3060B)
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 sparse</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-sparse-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: 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 border: 1px solid green; 30 } 31 32 span { 33 background: lime; 34 border: 1px solid; 35 } 36 37 .test1 .a { 38 grid-row: 1; 39 grid-column: 2 / span 1; 40 } 41 .test1 .b { 42 grid-row: 2; 43 grid-column: 2 / span 3; 44 } 45 .test1 .c, .test2 .c { 46 grid-row: 1 / span 2; 47 grid-column: auto / span 3; 48 } 49 50 .test2 .a { 51 grid-row: 1; 52 grid-column: 2 / span 3; 53 } 54 .test2 .b { 55 grid-row: 2; 56 grid-column: 2 / span 1; 57 } 58 59 .test3 { 60 grid-template-areas: 61 'a a a . ' 62 'a a a . ' 63 '. b b . ' 64 ; 65 } 66 .test3 .a { 67 grid-area: a; 68 } 69 .test3 .b { 70 grid-column: 2 / span 3; 71 grid-row: b; 72 } 73 .test3 .c { 74 grid-row: auto / span 2; 75 grid-column: auto / span 3; 76 } 77 78 .test4 .c { 79 grid-row: auto / span 2; 80 grid-column: auto / span 3; 81 } 82 83 .test5 .c { 84 grid-row-start: 2; 85 grid-column: auto / span 3; 86 } 87 88 .test6 { 89 grid-row-start: 2; 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 1229009 --> 152 <div class="grid2"> 153 <span style="grid-column: 2; grid-row: 1;">1</span> 154 <span style="grid-column: 1; grid-row: 2;">2</span> 155 <span style="grid-row: 1 / 3;">3</span> 156 <span style="grid-row: 2;">4</span> 157 </div> 158 159 </body> 160 </html>