grid-track-fit-content-sizing-001-ref.html (8060B)
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>Reference: fit-content() track sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281320"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-size:1px; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 grid-template-rows: auto auto; 16 position: relative; 17 border: 1px solid; 18 } 19 20 .c1 { grid-template-columns: max-content minmax(100px, 1fr); } 21 .c2 { grid: auto 10px / 200px 0 minmax(100px, 1fr); } 22 .c3 { grid: auto 10px / 100px 100px minmax(0px, 1fr); } 23 .c4 { grid: auto 10px / 100px 100px minmax(100px, 1fr); } 24 .c5 { grid: auto 10px / 0px minmax(0, 1fr) minmax(100px, 1fr); } 25 .c6 { grid: auto 10px / fit-content(0px) minmax(0, 1fr) minmax(100px, 1fr); } 26 .c7 { grid: auto 10px / fit-content(40%) fit-content(40%); } 27 28 span { line-height:0; grid-column:span 2; background: lime; } 29 .c1 span { grid-column:span 1; } 30 31 a { 32 display: inline-block; 33 width: 50px; 34 height: 1px; 35 } 36 37 y { 38 position: absolute; 39 left:0; right:0; top:0; bottom:0; 40 grid-area: 2/2/3/3; 41 height: 1px; 42 background: grey; 43 } 44 45 .w3 .c1 { grid-template-columns: 176px minmax(0px, 1fr); } 46 .w3 .c2 { grid-template-columns: 176px 0 minmax(0px, 1fr); } 47 48 .w4 .c1 { grid-template-columns: 152px minmax(0px, 1fr); } 49 .w4 .c2 { grid-template-columns: 152px 0 minmax(0px, 1fr); } 50 51 .w5 .c1 { grid-template-columns: 128px minmax(0px, 1fr); } 52 .w5 .c2 { grid-template-columns: 128px 0 minmax(0px, 1fr); } 53 54 .w6 .c1 { grid-template-columns: 104px minmax(0px, 1fr); } 55 .w6 .c2 { grid-template-columns: 104px 0 minmax(0px, 1fr); } 56 .w6 .c4 { grid-template-columns: 60px 100px minmax(0px, 1fr); } 57 58 .w7 .c1 { grid-template-columns: 80px minmax(0px, 1fr); } 59 .w7 .c2 { grid-template-columns: 80px 0 minmax(0px, 1fr); } 60 .w7 .c3 { grid-template-columns: 80px 80px minmax(0px, 1fr); } 61 .w7 .c4 { grid-template-columns: 0px 100px minmax(0px, 1fr); } 62 63 .w8 .c1 { grid-template-columns: 50px minmax(100px, 1fr); } 64 .w8 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } 65 .w8 .c3 { grid-template-columns: 56px 56px minmax(0, 1fr); } 66 .w8 .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); } 67 .w8 .c5 { grid-template-columns: 0px 40px 100px; } 68 69 .w9 .c1 { grid-template-columns: 50px minmax(100px, 1fr); } 70 .w9 .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } 71 .w9 .c3 { grid-template-columns: 32px 32px minmax(0, 1fr); } 72 .w9 .c4 { grid-template-columns: 0px 100px 100px; } 73 74 .wA .c1 { grid-template-columns: 50px minmax(100px, 1fr); } 75 .wA .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } 76 .wA .c3 { grid-template-columns: 25px 25px minmax(0, 1fr); } 77 .wA .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); } 78 79 .wB .c1 { grid-template-columns: 50px minmax(100px, 1fr); } 80 .wB .c2 { grid-template-columns: 50px 0 minmax(100px, 1fr); } 81 .wB .c3 { grid-template-columns: 25px 25px minmax(0, 1fr); } 82 .wB .c4 { grid-template-columns: 0px 100px minmax(100px, 1fr); } 83 84 </style> 85 </head> 86 <body> 87 88 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 89 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 90 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 91 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 92 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 93 <div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> 94 95 <div class="w2" style="width:502px"> 96 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 97 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 98 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 99 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 100 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 101 <div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> 102 </div> 103 104 <div class="w3" style="width:442px"> 105 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 106 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 107 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 108 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 109 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 110 </div> 111 112 <div class="w4" style="width:382px"> 113 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 114 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 115 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 116 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 117 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 118 </div> 119 120 <div class="w5" style="width:322px"> 121 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 122 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 123 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 124 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 125 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 126 </div> 127 128 <div class="w6" style="width:262px"> 129 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 130 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 131 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 132 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 133 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 134 </div> 135 136 <div class="w7" style="width:202px"> 137 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 138 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 139 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 140 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 141 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 142 <div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y></div> 143 </div> 144 145 <div class="w8" style="width:142px"> 146 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 147 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 148 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 149 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 150 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 151 </div> 152 153 <div class="w9" style="width:82px"> 154 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 155 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 156 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 157 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 158 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 159 </div> 160 161 <div class="wA" style="width:22px"> 162 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 163 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 164 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 165 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 166 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 167 <div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y></div> 168 </div> 169 170 <div class="wB" style="width:2px"> 171 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y></div> 172 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y></div> 173 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y></div> 174 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y></div> 175 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y></div> 176 </div> 177 178 </body> 179 </html>