Как сделать автоматически размещенные div с помощью grid-auto-flow: столбцы придерживаются друг друга? - PullRequest
Новая
       18

Как сделать автоматически размещенные div с помощью grid-auto-flow: столбцы придерживаются друг друга?

1 голос
/ 08 апреля 2019

Я хочу создать временную шкалу, которая будет содержать элементы, представляющие периоды времени. Я столкнулся с проблемой. При использовании 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?

1 Ответ

2 голосов
/ 08 апреля 2019

Вы можете просто использовать 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.

Встроенные сетки

В другом варианте используется inline-grid - автоматическое размещение элементов сетки теперь будет занимать столько же ширины, сколько его содержимое: 

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

...