CSS сетка - автоматическое создание новых разрывов строк в колонке автоматического потока

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

У меня есть сетка css, содержащая некоторые ссылки. Это сетка из трех столбцов с любым количеством строк (в зависимости от количества элементов).
Я бы хотел, чтобы количество элементов в каждом столбце было равномерным. Предпочтительно.

Количество столбцов и строк задается:
grid-template-columns: repeat(3, 1fr); // сделайте его шириной в три столбца
grid-template-rows: repeat(auto-fill); // автоматическое создание новых строк

Это работает отлично, за исключением случаев, когда я пытаюсь создать поток сетки по столбцам, а не по строкам:
grid-auto-flow: column; // это нарушает его

Пример:

 .container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(auto-fill);
  /*grid-auto-flow: column;*/ 
}

a {
  height: 50px;
}

 <div class="container">
  <a href="#">item one</a>
  <a href="#">item two</a>
  <a href="#">item three</a>
  <a href="#">item four</a>
  <a href="#">item fuve</a>
  <a href="#">item six</a>
  <a href="#">item seven</a>
  <a href="#">item eight</a>
  <a href="#">item nine</a>
  <a href="#">item ten</a>
  <a href="#">item eleven</a>
  <a href="#">item twelve</a>
  <a href="#">item thirteen</a>
  <a href="#">item fourteen</a>
  <a href="#">item fifteen</a>
</div>

Как я могу сохранить три столбца в своей сетке, сделать ее потоковой через столбцы вместо строк и позволить ей автоматически генерировать эти строки по мере необходимости?

1. вам нужен одинаковый межстрочный интервал?

2. Привет, спасибо за ответ …. в идеале я делаю, но что вы имеете в виду?

3. Я имею в виду grid-row-gap правило

4. Как это поможет? У меня нет предпочтений для этого, вероятно, это будет 0….

5. Из вашего вопроса я почему-то понял, что вам нужен grid-row-gap, поскольку он делает отступы для определенных строк. Но теперь я не совсем понимаю вашу проблему..

Ответ №1:

Вам нужна не CSS сетка, а столбцы:

 .container {
  column-count:3;
}

a {
  height: 50px;
  display:block;
}

 <div class="container">
  <a href="#">item one</a>
  <a href="#">item two</a>
  <a href="#">item three</a>
  <a href="#">item four</a>
  <a href="#">item fuve</a>
  <a href="#">item six</a>
  <a href="#">item seven</a>
  <a href="#">item eight</a>
  <a href="#">item nine</a>
  <a href="#">item ten</a>
  <a href="#">item eleven</a>
  <a href="#">item twelve</a>
  <a href="#">item thirteen</a>
  <a href="#">item fourteen</a>
  <a href="#">item fifteen</a>
</div>