网格布局，如何使最后一个项目发生在行的剩余空间

Question

我想实现这种风格，其中最后一项总是可以发生一行的剩余空间，所以布局可以是一个没有任何间隙的正方形

无论如何使用ONLY css实现这一点吗？

非常感谢

Answer 1

您可以使用flexbox - 只需将flex-grow添加到最后一个子节点，它将占用该行的其余部分

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom:30px;
}

.item {
  flex-basis:33.333333%;
  border:1px solid black;
}


.item:last-child {
  flex-grow:1
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>
<div class="container">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>
<div class="container">
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
  <div class="item">1</div>
</div>

＆＃13;

＆＃13;

＆＃13;