grid-repeat-auto-fill-fit-012-ref.html (2637B)
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: repeat(auto-fit) with removed tracks</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1417711"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font:16px/1 monospace; padding:0px; margin:0; 13 } 14 15 .container { 16 width: 200px; 17 } 18 19 .grid { 20 position: relative; 21 display: grid; 22 grid: 10px / repeat(5, 30px); 23 grid-auto-columns: 2px; 24 background: lightgrey; 25 margin-bottom: 4px; 26 grid-gap: 5px; 27 } 28 .distribute { 29 grid-gap: 0; 30 align-content: space-around; 31 } 32 33 span { 34 background: blue; 35 height: 10px; 36 } 37 38 .abs { 39 position: absolute; 40 top:0; right:0; bottom:0; left:0; 41 grid-column-end: span 1; 42 background: pink; 43 } 44 45 </style> 46 </head> 47 <body> 48 49 <div class="container"> 50 <div class="grid"> 51 <span style="grid-column: 1"></span> 52 </div> 53 </div> 54 55 <div class="container"> 56 <div class="grid"> 57 <span style="grid-column: 1"></span> 58 </div> 59 </div> 60 61 <div class="container"> 62 <div class="grid"> 63 <span style="grid-column: 1 / 2" class="abs"></span> 64 </div> 65 </div> 66 67 <div class="container"> 68 <div class="grid"> 69 <span style="grid-column: 1 / 2" class="abs"></span> 70 </div> 71 </div> 72 73 <div class="container"> 74 <div class="grid"> 75 <span style="grid-column: 1 / 3" class="abs"></span> 76 </div> 77 </div> 78 79 <div class="container"> 80 <div class="grid"> 81 <span style="grid-column: 1 / 2" class="abs"></span> 82 </div> 83 </div> 84 85 <div class="container"> 86 <div class="grid"> 87 </div> 88 </div> 89 90 <div class="container"> 91 <div class="grid"> 92 <span style="grid-column: 1 / auto" class="abs"></span> 93 </div> 94 </div> 95 96 <div class="container"> 97 <div class="grid distribute"> 98 <span style="grid-column: 1"></span> 99 </div> 100 </div> 101 102 <div class="container"> 103 <div class="grid distribute"> 104 <span style="grid-column: 1"></span> 105 </div> 106 </div> 107 108 <div class="container"> 109 <div class="grid distribute"> 110 <span style="grid-column: 1 / 2" class="abs"></span> 111 </div> 112 </div> 113 114 <div class="container"> 115 <div class="grid distribute"> 116 <span style="grid-column: 1 / 2" class="abs"></span> 117 </div> 118 </div> 119 120 <div class="container"> 121 <div class="grid distribute"> 122 <span style="grid-column: 1 / 3" class="abs"></span> 123 </div> 124 </div> 125 126 <div class="container"> 127 <div class="grid distribute"> 128 <span style="grid-column: 1 / 2" class="abs"></span> 129 </div> 130 </div> 131 132 <div class="container"> 133 <div class="grid distribute"> 134 </div> 135 </div> 136 137 <div class="container"> 138 <div class="grid distribute"> 139 <span style="grid-column: 1 / auto" class="abs"></span> 140 </div> 141 </div> 142 143 </body> 144 </html>