Как ограничить количество строк в grid css?

Question

Я хочу сделать 2 столбца по 5 элементов в каждом. Сейчас у меня 6 элементов, значит, 5 из них должны быть в первом столбце, а шестой - во 2-м столбце.

Должно быть:

Текущее состояние:

Код:

.footer-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

<ul class="footer-menu">
  <li><a href="#">Maps</a></li>
  <li><a href="#">Style</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Exebitions</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Shop</a></li>
</ul>

Answer 1

Нужно задать поведение сетке, что сначала заполняются колонки, через grid-auto-flow:

.footer-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
}

<ul class="footer-menu">
  <li><a href="#">Maps</a></li>
  <li><a href="#">Style</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Exebitions</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Shop</a></li>
</ul>

Тогда всё будет работать как надо.

БЛОГ НА HUSL

Как ограничить количество строк в grid css?

Ответы (1 шт):