javascript - 如何在 grid-auto-flow :column stick to each other? 中制作自动放置 div

Question

我想制作包含代表时间段的 div 的时间轴。我遇到了麻烦。当使用 grid-auto-flow: column 使所有 div 水平时，div 之间的间隙非常大。

.timelineBox {
  border: 1px solid red;
}

.timelineBox>.timeline>div.main {
  height: 50px;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0px;
}

._1 {
  background-color: red;
}

._2 {
  background-color: blue;
}

._3 {
  background-color: lime;
}

._4 {
  background-color: purple;
}

.timelineBox>.timeline>div.main>div {
  height: 100%;
}

<div class='timelineBox'>
  <div ident='tl1' class='timeline'>
    <div class='main'>
      <div style='width: 5px;' class='_1'>
      </div>
      <div style='width: 120px;' class='_2'>
      </div>
    </div>
  </div>
</div>

如何在不调整父 div 大小的情况下使这个差距变小？

---

TD;DR:如何在使用 grid-auto-flow: column 时让 div 粘附？

Answer 1

您可以只使用justify-content: flex-start 将所有网格项 对齐到网格容器 的左侧 - 请参阅演示如下:

.timelineBox {
  border: 1px solid red;
}

.timelineBox>.timeline>div.main {
  height: 50px;
  display: grid;
  justify-content: flex-start;
  grid-auto-flow: column;
  grid-gap: 0px;
}

._1 {
  background-color: red;
}

._2 {
  background-color: blue;
}

._3 {
  background-color: lime;
}

._4 {
  background-color: purple;
}

.timelineBox>.timeline>div.main>div {
  height: 100%;
}

<div class='timelineBox'>
  <div ident='tl1' class='timeline'>
    <div class='main'>
      <div style='width: 5px;' class='_1'></div>
      <div style='width: 120px;' class='_2'></div>
      <div style='width: 5px;' class='_1'></div>
      <div style='width: 120px;' class='_2'></div>
    </div>
  </div>
</div>

---

隐式网格

但您在这里有更多选择 - 因为您没有指定 grid-template-columns 属性，您正在处理隐式网格。您看到的 grid items 的计算宽度是由于默认的 grid-auto-columns: auto 属性，它处理隐式网格的网格列。

因此您可以像下面那样指定 grid-auto-columns: min-content 来获得相同的结果:

.timelineBox {
  border: 1px solid red;
}

.timelineBox>.timeline>div.main {
  height: 50px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content; /* ADDED */
  grid-gap: 0px;
}

._1 {
  background-color: red;
}

._2 {
  background-color: blue;
}

._3 {
  background-color: lime;
}

._4 {
  background-color: purple;
}

.timelineBox>.timeline>div.main>div {
  height: 100%;
}

<div class='timelineBox'>
  <div ident='tl1' class='timeline'>
    <div class='main'>
      <div style='width: 5px;' class='_1'></div>
      <div style='width: 120px;' class='_2'></div>
      <div style='width: 5px;' class='_1'></div>
      <div style='width: 120px;' class='_2'></div>
    </div>
  </div>
</div>

您可以阅读更多关于 Implicit and Explicit Grids here 的信息.

---

内联网格

另一个选项是使用内联网格 - 网格项的自动放置现在只占用与其内容一样多的宽度:

.timelineBox {
  border: 1px solid red;
}

.timelineBox>.timeline>div.main {
  height: 50px;
  display: inline-grid; /* changed to inline*/
  vertical-align: top; /* align inline element */
  grid-auto-flow: column;
  grid-gap: 0px;
}

._1 {
  background-color: red;
}

._2 {
  background-color: blue;
}

._3 {
  background-color: lime;
}

._4 {
  background-color: purple;
}

.timelineBox>.timeline>div.main>div {
  height: 100%;
}

<div class='timelineBox'>
  <div ident='tl1' class='timeline'>
    <div class='main'>
      <div style='width: 5px;' class='_1'></div>
      <div style='width: 120px;' class='_2'></div>
      <div style='width: 5px;' class='_1'></div>
      <div style='width: 120px;' class='_2'></div>
    </div>
  </div>
</div>

你可以看到一个不错的example of using inline grids here .