时间戳

首页 > 解决方案 > 如何通过 grid-auto-flow:column 使自动放置的 div 相互粘连？

javascript - 如何通过 grid-auto-flow:column 使自动放置的 div 相互粘连？

问题描述

我想制作包含代表时间段的 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：如何让 div在使用时相互粘连grid-auto-flow: column？

标签： javascripthtmlcsscss-grid

解决方案

您可以使用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你在这里处理隐式网格的属性。您看到的网格项的计算宽度是由于 default属性，它处理隐式网格的网格列的大小。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.

推荐阅读