Выровняйте все элементы по горизонтали слева с помощью сетки CSS - PullRequest
Новая
       70

Выровняйте все элементы по горизонтали слева с помощью сетки CSS

1 голос
/ 30 мая 2020

  1. У меня неизвестное количество элементов, и я хочу, чтобы они располагались горизонтально слева

  2. Мне нужен фиксированный промежуток между элементами

  3. Ширина элементов неизвестна и может иметь разные варианты

Я знаю, что могу использовать flex, как показано ниже, но я хотел бы знать, если это можно сделать с помощью grid. 

#box { 
  display: flex; 
  width: 300px; 
  outline: 1px solid blue; 
}
.item { 
  background: gray; 
  width: 50px; 
  height: 100px; 
}

#box > * + * {
  margin-left: 10px;
}
<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

Обновление

Увеличено значение ширины для родительского элемента, чтобы более четко отображать то, что я собираюсь делать - дети не должны занимать полная ширина родителя (если, конечно, детей не много).

1 Ответ

1 голос
/ 30 мая 2020

Вот. Я использовал те же размеры и размеры из вашего примера.

Зависит от ширины дочерних элементов 

#box {
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-columns: auto;
  grid-auto-rows: 100px;
  column-gap: 10px;
  outline: 1px solid blue;
}

.item {
  background: gray;
  width: 50px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Зависит от родительской ширины 

#box {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto;
  grid-auto-rows: 100px;
  column-gap: 10px;
  outline: 1px solid blue;
  width: 230px;
}

.item {
  background: gray;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

ОБНОВЛЕНО

Когда размер родительского элемента составляет 100% ширины, а количество дочерних элементов не определено. 

#box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-auto-rows: 100px;
  column-gap: 10px;
  outline: 1px solid blue;
}

.item {
  background: gray;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Теперь мы знаем, что ваш случай может быть решен с помощью grid, но я предлагаю вам использовать flex. Использование grid для этой задачи похоже на удар молотком по винту - мы можем достичь цели, но используя неправильный инструмент. Grid более полезно для таблиц с необычной схемой продаж, лучше, если мы знаем количество столбцов. И Flex полезнее для списков элементов, как в вашем случае. Хотя Flex более старый и более родной, чем Grid, он работает намного стабильнее во всех современных браузерах.

...