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

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

ТД;ДР: Как сделать div палка друг к другу при использовании grid-auto-flow: column?

justify-content: flex-start; ?

— 08.04.2019 12:34

javascript html css css-grid

08.04.2019 12:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

Спасибо. Очень полный ответ. Я знал о min-content, потому что делал то же самое около года назад. Просто забыл, что он существует :) Опять же. Спасибо.

— 08.04.2019 15:48

08.04.2019 15:26