grid-repeat-auto-fill-fit-003.html (7909B)
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 Grid Test: repeat(auto-fill/auto-fit)</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1118820"> 10 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-fill"> 11 <link rel="match" href="grid-repeat-auto-fill-fit-003-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font-size:16px; padding:0; margin:0; 15 } 16 17 .grid { 18 display: grid; 19 float: left; 20 position: relative; 21 border: 1px solid; 22 grid-auto-columns: 10px; 23 grid-auto-rows: 10px; 24 grid-auto-flow: column; 25 grid-gap: 2px; 26 margin-right: 2px; 27 padding-top: 3px; 28 } 29 .r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; } 30 .r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; } 31 .r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; } 32 fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; } 33 fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; } 34 fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30px [f]; } 35 36 .w100 { height: 100px; } 37 .w50 { height: 50px; } 38 .w80 { height: 80px; } 39 .mw100 { min-height: 100px; } 40 .mw50 { min-height: 50px; } 41 .mw80 { min-height: 80px; } 42 .xw100 { max-height: 100px; } 43 .xw50 { max-height: 50px; } 44 .xw80 { max-height: 80px; } 45 .float { float: left; } 46 47 x { 48 width: 10px; 49 background: grey; 50 } 51 a { 52 position: absolute; 53 left:0; top:0; bottom:0; width: 3px; 54 background: black; 55 grid-row: c / c -1; 56 } 57 b { 58 position: absolute; 59 right:0; top:0; bottom:0; width: 3px; 60 background: brown; 61 grid-row: auto / c -1; 62 } 63 64 x:first-child { 65 background: lime; 66 } 67 x:last-child { 68 background: blue; 69 } 70 71 </style> 72 </head> 73 <body> 74 75 <fill> 76 77 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> 78 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> 79 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> 80 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> 81 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> 82 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> 83 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> 84 <div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> 85 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 86 <div class="grid r1 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> 87 <div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 88 <div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 89 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 90 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 91 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 92 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 93 94 <br clear="all"> 95 <br clear="all"> 96 97 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> 98 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> 99 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> 100 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> 101 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> 102 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> 103 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> 104 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 105 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 106 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 107 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 108 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 109 110 <br clear="all"> 111 <br clear="all"> 112 113 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> 114 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> 115 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> 116 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> 117 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> 118 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> 119 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> 120 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 121 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 122 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 123 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 124 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 125 126 </fill> 127 128 <br clear="all"> 129 <br clear="all"> 130 131 <fit> 132 133 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div> 134 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div> 135 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div> 136 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div> 137 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div> 138 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div> 139 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div> 140 <div class="grid r1 mw80 xw50"><x></x><x></x><a></a><b></b><x></x></div> 141 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 142 <div class="grid r1 w100 xw50 float"><x></x><x></x><a></a><b></b><x></x></div> 143 <div class="grid r1 w100 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 144 <div class="grid r1 xw80 float"><x></x><x></x><a></a><b></b><x></x></div> 145 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 146 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 147 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 148 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 149 150 <br clear="all"> 151 <br clear="all"> 152 153 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div> 154 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div> 155 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div> 156 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div> 157 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div> 158 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div> 159 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div> 160 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 161 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 162 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 163 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 164 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 165 166 <br clear="all"> 167 <br clear="all"> 168 169 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div> 170 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div> 171 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div> 172 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div> 173 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div> 174 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div> 175 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div> 176 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div> 177 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 178 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div> 179 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div> 180 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div> 181 182 <br clear="all"> 183 <br clear="all"> 184 185 </fit> 186 187 188 </body> 189 </html>