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