grid-repeat-auto-fill-fit-004.html (8288B)
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-004-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: 100%; } 37 .w50 { height: 50%; } 38 .w80 { height: 80%; } 39 .mw100 { min-height: 100%; } 40 .mw50 { min-height: 50%; } 41 .mw80 { min-height: 80%; } 42 .xw100 { max-height: 100%; } 43 .xw50 { max-height: 50%; } 44 .xw80 { max-height: 80%; } 45 .float { float: left; } 46 47 wrap { float:left; height: 100px; } 48 49 x { 50 width: 10px; 51 background: grey; 52 } 53 a { 54 position: absolute; 55 left:0; top:0; bottom:0; width: 3px; 56 background: black; 57 grid-row: c / c -1; 58 } 59 b { 60 position: absolute; 61 right:0; top:0; bottom:0; width: 3px; 62 background: brown; 63 grid-row: auto / c -1; 64 } 65 66 x:first-child { 67 background: lime; 68 } 69 x:last-child { 70 background: blue; 71 } 72 73 </style> 74 </head> 75 <body> 76 77 <fill> 78 79 <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap> 80 <wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 81 <wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 82 <wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 83 <wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 84 <wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 85 <wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 86 <wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 87 <wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 88 <wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 89 <wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 90 <wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 91 92 <br clear="all"> 93 <br clear="all"> 94 95 <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap> 96 <wrap><div class="grid r2 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 97 <wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 98 <wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 99 <wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 100 <wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 101 <wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 102 <wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 103 <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 104 <wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 105 <wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 106 <wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 107 108 <br clear="all"> 109 <br clear="all"> 110 111 <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap> 112 <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 113 <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 114 <wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 115 <wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 116 <wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 117 <wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 118 <wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 119 <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 120 <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 121 <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 122 <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 123 124 </fill> 125 126 <br clear="all"> 127 <br clear="all"> 128 129 <fit> 130 131 <wrap><div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div></wrap> 132 <wrap><div class="grid r1 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 133 <wrap><div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 134 <wrap><div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 135 <wrap><div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 136 <wrap><div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 137 <wrap><div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 138 <wrap><div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 139 <wrap><div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 140 <wrap><div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 141 <wrap><div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 142 <wrap><div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 143 144 <br clear="all"> 145 <br clear="all"> 146 147 <wrap><div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div></wrap> 148 <wrap><div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 149 <wrap><div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 150 <wrap><div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 151 <wrap><div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 152 <wrap><div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 153 <wrap><div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 154 <wrap><div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 155 <wrap><div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 156 <wrap><div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 157 <wrap><div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 158 <wrap><div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 159 160 <br clear="all"> 161 <br clear="all"> 162 163 <wrap><div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div></wrap> 164 <wrap><div class="grid r3 float w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 165 <wrap><div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div></wrap> 166 <wrap><div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 167 <wrap><div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 168 <wrap><div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 169 <wrap><div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div></wrap> 170 <wrap><div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div></wrap> 171 <wrap><div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 172 <wrap><div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 173 <wrap><div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 174 <wrap><div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div></wrap> 175 176 <br clear="all"> 177 <br clear="all"> 178 179 </fit> 180 181 182 </body> 183 </html>