How to make auto-placed divs via grid-auto-flow:column stick to each other?

I want to make timeline that will contain divs representing periods of time. I encountered trouble. When using grid-auto-flow: column to make all divs horizontal the gaps between divs are very big.

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

How to make this gap be smaller without resizing parent div?

TD;DR: How to make divs stick to each other when using grid-auto-flow: column?

Solution

You can just use justify-content: flex-start to align all the grid items to the left of the grid container - see demo below:

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

Implicit Grids

But you have more options here - because and you have not specified grid-template-columns property you are dealing with implicit grids here. The computed width of grid items that you are seeing is due to the default grid-auto-columns: auto property, which handles the sizing of grid columns for implicit grids.

So you can specify grid-auto-columns: min-content like below to achieve the same result:

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

You can read more about Implicit and Explicit Grids here.

Inline Grids

Another option use an inline-grid - the auto placement of grid items will now take only as much width as its contents:

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

You can see a nice example of using inline grids here.