如何通过grid-auto-flow：column相互粘贴来使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大小的情况下缩小此差距？

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