grid-order-placement-auto-001.html (2885B)
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: Testing automatic placement of grid items with 'order'</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo"> 11 <link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property"> 12 <link rel="match" href="grid-order-placement-auto-001-ref.html"> 13 <style type="text/css"> 14 .grid { 15 display: grid; 16 border: 1px solid green; 17 grid-template-columns: 20px 20px 20px 20px; 18 grid-template-rows: 20px 20px 20px; 19 grid-auto-flow: row; 20 grid-auto-columns: 20px; 21 grid-auto-rows: 20px; 22 font-size: 12px; 23 } 24 25 span { 26 background: lime; 27 border: 1px solid; 28 } 29 30 .test1 .a { 31 grid-row: 1; 32 grid-column: 2 / span 1; 33 } 34 .test1 .b { 35 grid-row: 2; 36 grid-column: 2 / span 3; 37 order: 3; 38 } 39 .test1 .c, .test2 .c { 40 grid-row: 1 / span 2; 41 grid-column: auto / span 3; 42 order: 1; 43 } 44 45 .test2 .a { 46 grid-row: 1; 47 grid-column: 2 / span 3; 48 order: 3; 49 } 50 .test2 .b { 51 grid-row: 2; 52 grid-column: 2 / span 1; 53 order: 1; 54 } 55 56 .test3 { 57 grid-template-areas: 58 'a a a . ' 59 'a a a . ' 60 '. b b . ' 61 ; 62 } 63 .test3 .a { 64 grid-area: a; 65 order: 5; 66 } 67 .test3 .b { 68 grid-column: 2 / span 3; 69 grid-row: b; 70 order: 4; 71 } 72 .test3 .c { 73 grid-row: auto / span 2; 74 grid-column: auto / span 3; 75 order: 3; 76 } 77 78 .test4 .c { 79 grid-row: auto / span 2; 80 grid-column: auto / span 3; 81 order: 3; 82 } 83 84 .test5 .c { 85 grid-row-start: 2; 86 grid-column: auto / span 3; 87 order: 2; 88 } 89 90 .test6 { 91 grid-row-start: 2; 92 grid-column: auto / span X; 93 order: 1; 94 } 95 96 .e { 97 grid-row-start: 2; 98 grid-column: auto / span 1; 99 order: 1; 100 } 101 </style> 102 </head> 103 <body> 104 105 <div class="grid test1"> 106 <span class="a">a</span> 107 <span class="b">b</span> 108 <span class="c">c</span> 109 <span class="d">d</span> 110 <span class="d">D</span> 111 <span class="e">e</span> 112 </div> 113 114 <div class="grid test2"> 115 <span class="a">a</span> 116 <span class="b">b</span> 117 <span class="c">c</span> 118 <span class="d">d</span> 119 <span class="d">D</span> 120 <span class="e">e</span> 121 </div> 122 123 <div class="grid test3"> 124 <span class="a">a</span> 125 <span class="b">b</span> 126 <span class="c">c</span> 127 <span class="d">d</span> 128 <span class="d">D</span> 129 <span class="e">e</span> 130 </div> 131 132 <div class="grid test4"> 133 <span class="c">c</span> 134 <span class="d">d</span> 135 <span class="d">D</span> 136 <span class="e">e</span> 137 </div> 138 139 <div class="grid test5"> 140 <span class="c">c</span> 141 <span class="d">d</span> 142 <span class="d">D</span> 143 <span class="e">e</span> 144 </div> 145 146 <div class="grid test1"> 147 <span class="a">a</span> 148 <span class="b">b</span> 149 <span class="c">c</span> 150 <span class="test6">d</span> 151 <span class="test6">D</span> 152 <span class="e">e</span> 153 </div> 154 155 </body> 156 </html>