CSS Grid 使列间距相同

Question

如何使项目之间的间隙/空间相同？

我尝试过grid-column-gap，但是由于每行的项目数不同，因此间隙会有所不同，其中第一行和第三行较大，第二行是理想的间隙空间。

另一种选择是将项目的宽度设置为 100% 并添加边距，但这样它们的宽度会有所不同，因为第二行上的项目会更小。

我想要实现的是：

1. 居中 div #innerContainer 中的所有项目
2. 使项目之间的差距相同
3. 每一项的宽度都是一样的

#container {
  display: flex;
  align-items: center;
  justify-content: center;
}

#innerContainer {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  grid-column-gap: 9px;
  grid-row-gap: 9px;
}

.item {
  width: 90px;
  height: 90px;
  background-color: blue;
  grid-column: auto / span 15;
}

.item:nth-child(4)~.item {
  grid-column: auto / span 12
}

<div id="container">
  <div id="innerContainer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 1

Flexbox 现在提供gap 属性。我们可以将其与多行内容一起使用以使其工作。

您应该使用 flexbox 进行灵活调整大小。这是因为网格应该是表格的。而且它真的不想让你在空间里乱七八糟。它始终与某个栅格对齐。

它应该适用于所有主要浏览器（请参阅：https://caniuse.com/?search=gap），但您始终可以回退到使用填充代替或均匀地间隔项目并使行足够宽以使可用空间等于n * n_size + (n-1) * gap。

#container {
  border: 1px dashed black;
  /* just for visuals */
  display: flex;
  align-items: center;
  justify-content: center;
}

#innerContainer {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.item {
  width: 90px;
  height: 90px;
  background-color: blue;
}

<div id="container">
  <div id="innerContainer">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

Answer 2

删除 CSS 网格并使用 flexbox：

#innerContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap:wrap;
  gap: 4.5px 9px;
}
/* pseudo element will seperate your elements*/
#innerContainer:before,
#innerContainer:after {
  content:"";
  flex-basis:100%
}
#innerContainer:after {
  order:2;
}
/**/
/* 4 items before the "before" */
.item:nth-child(-n + 4) {
  order:-1;
}
/* 4 items after the "after" */
.item:nth-last-child(-n + 4) {
  order:3;
}

.item {
  width: 90px;
  height: 90px;
  background-color: blue;
}

<div id="container">
  <div id="innerContainer">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>