css - CSS - 多行项目之间的空格

Question

我有一个包含动态数量的项目的容器。

每行最多可包含 4 个项目。如果超过 4 个项目，则下一个项目将开始一个新行（图 1）。如果少于 4 个项目也没关系，它们不会填满整行（图 2）。

但是我在它们之间的空格上遇到了麻烦：

我尝试使用margin-right，但它会影响行中的最后一项（例如：item #4）。

我尝试使用justify-content: space-between，但它只适用于 4 件及以上的物品。对于 3 及以下，它在它们之间创建了一个很大的空间，我希望它们看起来像图 2 中的那样。

还有其他优雅/简单的解决方案吗？

.container {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.item {
  display: inline-block;
  width: calc(25% - 12px);
  /* margin-right: 12px; */
}

<div class="container">
  <div class="item">
    #1
  </div>
  <div class="item">
    #2
  </div>
  <div class="item">
    #3
  </div>
  <div class="item">
    #4
  </div>
</div>

标签： cssflexbox

Answer 1

您可以使用 css 网格，您必须使用display: grid;，用于grid-template-columns设置您想要的列数（1fr = 1 父容器分数），最后用于grid-gap设置项目之间的空间。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 12px;
}
.item {
    display: inline-block;
    border: 1px solid red;
    color: red;
}

<div class="container">
   <div class="item">
       #1
   </div>
   <div class="item">
       #2
   </div>
   <div class="item">
       #3
   </div>
   <div class="item">
       #4
   </div>
</div>

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 12px;
}
.item {
    display: inline-block;
    border: 1px solid red;
    color: red;
}

<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>

有关 Css 网格的更多信息在这里！