我正在尝试使用youtube.com自适应网格布局。我可以使用CSS Grid实现。但是,如果卡片的总数非常少,例如2张,卡片的宽度会增加以适应整行。我可以通过设置max-width或width来避免这种情况,但是当我改变浏览器窗口的宽度时,卡片之间的间隙也会发生变化。
如何设置max-width而不增加卡片之间的间距?
.grid-layout {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr) );
}
.card {
background: grey;
height: 4rem;
/* Uncommenting below line sets width but gap between card too high*/
/* max-width: 7rem; */
padding: 1px;
margin: 0.5rem;
line-height: 4rem;
color: white;
font-weight: bold;
font-size: 2rem;
text-align: center;
}
<section class="grid-layout">
<div class="card">0</div>
<div class="card">1</div>
<!-- <div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
<div class="card">13</div>
<div class="card">14</div>
<div class="card">15</div>
<div class="card">16</div>
<div class="card">17</div>
<div class="card">18</div>
<div class="card">19</div> -->
</section>