如何通过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 {&nbsp; border: 1px solid red;}.timelineBox>.timeline>div.main {&nbsp; height: 50px;&nbsp; display: grid;&nbsp; justify-content: flex-start;&nbsp; grid-auto-flow: column;&nbsp; grid-gap: 0px;}._1 {&nbsp; background-color: red;}._2 {&nbsp; background-color: blue;}._3 {&nbsp; background-color: lime;}._4 {&nbsp; background-color: purple;}.timelineBox>.timeline>div.main>div {&nbsp; height: 100%;}<div class='timelineBox'>&nbsp; <div ident='tl1' class='timeline'>&nbsp; &nbsp; <div class='main'>&nbsp; &nbsp; &nbsp; <div style='width: 5px;' class='_1'></div>&nbsp; &nbsp; &nbsp; <div style='width: 120px;' class='_2'></div>&nbsp; &nbsp; &nbsp; <div style='width: 5px;' class='_1'></div>&nbsp; &nbsp; &nbsp; <div style='width: 120px;' class='_2'></div>&nbsp; &nbsp; </div>&nbsp; </div></div>隐式网格但是您在这里有更多选择-因为并且您没有指定grid-template-columns属性，所以您在这里处理隐式网格。该计算的宽度网格项目，你看到的是由于默认的grid-auto-columns: auto属性，它处理的大小格列于隐格。因此，您可以grid-auto-columns: min-content像下面这样指定以达到相同的结果：.timelineBox {&nbsp; border: 1px solid red;}.timelineBox>.timeline>div.main {&nbsp; height: 50px;&nbsp; display: grid;&nbsp; grid-auto-flow: column;&nbsp; grid-auto-columns: min-content; /* ADDED */&nbsp; grid-gap: 0px;}._1 {&nbsp; background-color: red;}._2 {&nbsp; background-color: blue;}._3 {&nbsp; background-color: lime;}._4 {&nbsp; background-color: purple;}.timelineBox>.timeline>div.main>div {&nbsp; height: 100%;}<div class='timelineBox'>&nbsp; <div ident='tl1' class='timeline'>&nbsp; &nbsp; <div class='main'>&nbsp; &nbsp; &nbsp; <div style='width: 5px;' class='_1'></div>&nbsp; &nbsp; &nbsp; <div style='width: 120px;' class='_2'></div>&nbsp; &nbsp; &nbsp; <div style='width: 5px;' class='_1'></div>&nbsp; &nbsp; &nbsp; <div style='width: 120px;' class='_2'></div>&nbsp; &nbsp; </div>&nbsp; </div></div>您可以阅读有关的更多信息Implicit and Explicit Grids here。内联网格另一种选择是使用嵌入式网格-网格项目的自动放置现在仅需要其内容的宽度：.timelineBox {&nbsp; border: 1px solid red;}.timelineBox>.timeline>div.main {&nbsp; height: 50px;&nbsp; display: inline-grid; /* changed to inline*/&nbsp; vertical-align: top; /* align inline element */&nbsp; grid-auto-flow: column;&nbsp; grid-gap: 0px;}._1 {&nbsp; background-color: red;}._2 {&nbsp; background-color: blue;}._3 {&nbsp; background-color: lime;}._4 {&nbsp; background-color: purple;}.timelineBox>.timeline>div.main>div {&nbsp; height: 100%;}<div class='timelineBox'>&nbsp; <div ident='tl1' class='timeline'>&nbsp; &nbsp; <div class='main'>&nbsp; &nbsp; &nbsp; <div style='width: 5px;' class='_1'></div>&nbsp; &nbsp; &nbsp; <div style='width: 120px;' class='_2'></div>&nbsp; &nbsp; &nbsp; <div style='width: 5px;' class='_1'></div>&nbsp; &nbsp; &nbsp; <div style='width: 120px;' class='_2'></div>&nbsp; &nbsp; </div>&nbsp; </div></div>你会看到一个不错的example of using inline grids here。