时间戳

首页 > 解决方案 > CSS Grid 使列间距相同

css - CSS Grid 使列间距相同

问题描述

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

我试过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>

标签： css

解决方案

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>

推荐阅读