grid-track-fit-content-sizing-002-ref.html (6826B)
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: fit-content() track sizing</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1299133"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-size:16px; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 grid-auto-rows: 5px; 16 justify-content: start; 17 position: relative; 18 border: 1px solid; 19 } 20 21 .c1 { grid-template-columns: fit-content(40%) 25px minmax(100px, 1fr); } 22 .c2 { grid-template-columns: fit-content(40%) 25px 0 25px minmax(100px, 1fr); } 23 .c3 { grid-template-columns: fit-content(40%) 25px fit-content(40%) 25px minmax(0px, 1fr); } 24 .c4 { grid-template-columns: fit-content(40%) 25px 100px 25px minmax(100px, 1fr); } 25 .c5 { grid-template-columns: fit-content(40%) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); } 26 .c6 { grid-template-columns: fit-content(calc(1px - 99%)) 25px minmax(0, 1fr) 25px minmax(100px, 1fr); } 27 .c7 { grid-template-columns: fit-content(40%) 25px fit-content(40%); } 28 29 span { 30 grid-column: 1 / span 3; 31 grid-row: 2; 32 height: 2px; 33 background: lime; 34 min-width: 50px; 35 } 36 .c1 span { grid-column:1; } 37 38 a { 39 display: inline-block; 40 width: 50px; 41 height: 1px; 42 } 43 44 y { 45 position: absolute; 46 left: 0; right: 0; top: 0; 47 height: 2px; 48 background: purple; 49 grid-column: 1 / 2; 50 } 51 y:nth-of-type(2n) { background: orange; grid-column: 3 / 4; } 52 53 </style> 54 </head> 55 <body> 56 57 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 58 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 59 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 60 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 61 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 62 <div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 63 64 <div style="width:502px"> 65 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 66 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 67 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 68 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 69 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 70 <div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 71 </div> 72 73 <div style="width:442px"> 74 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 75 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 76 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 77 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 78 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 79 </div> 80 81 <div style="width:382px"> 82 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 83 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 84 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 85 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 86 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 87 </div> 88 89 <div style="width:322px"> 90 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 91 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 92 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 93 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 94 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 95 </div> 96 97 <div style="width:262px"> 98 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 99 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 100 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 101 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 102 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 103 </div> 104 105 <div style="width:202px"> 106 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 107 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 108 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 109 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 110 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 111 <div class="grid c7"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 112 </div> 113 114 <div style="width:142px"> 115 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 116 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 117 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 118 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 119 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 120 </div> 121 122 <div style="width:82px"> 123 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 124 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 125 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 126 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 127 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 128 </div> 129 130 <div style="width:22px"> 131 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 132 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 133 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 134 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 135 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 136 <div class="grid c6"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 137 </div> 138 139 <div style="width:2px"> 140 <div class="grid c1"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 141 <div class="grid c2"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 142 <div class="grid c3"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 143 <div class="grid c4"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 144 <div class="grid c5"><span><a></a><a></a><a></a><a></a></span><y></y><y></y></div> 145 </div> 146 147 </body> 148 </html>