Question

如果没有足够的自然填充行，我希望CSS Grid的最后一行中的项目能够展开。

我可以使用Flexbox轻松实现此目的。

＆＃13;

.container {
  display:flex;
  flex-wrap:wrap;
  margin:10px -5px;
}
.item {
  background:#eee;
  margin:0.5%;
  padding:40px;
  flex-grow:1;
  flex-basis:25%;
}

＆＃13;

<h2>Flex auto fiting last row elements</h2>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

＆＃13;

我想用CSS Grid做这个的原因是它有网格间隙，而flexbox没有，这意味着使用hacky代码。您可以在我的示例中看到在容器上使用负边距来偏移项目的左外边距和右边距。

我为CSS Grid https://codepen.io/chrishoward/pen/ELdJxo设置了一个codepen，正如您所看到的，第七项坚决拒绝扩展到行的宽度。

今天我花了好几个小时，其中包括CSS Tricks和Rachel Andrew的excellent examples，所以甚至不确定这是否可行。

谢谢

使用css网格时，如何展开最后一行项以适合行宽

0 个答案: