Расположение CSS-grid?

Question

[Алексей Орлов]

1. Например, я не знаю сколько будет элементов в контейнере со свойством display:grid (например, это пункты меню, которые задаются через цикл php и добавляются через админ-панель). Тогда что необходимо задать в grid-template-columns: repeat(?, 1fr)? Или же каждый раз менять свойство, когда меняется количество пунктов через админ-панель, либо есть универсальное свойство?

2. Имеется такая структура:

<nav class="nav">
        <a href="" class="nav__link">1</a>
        <a href="" class="nav__link">2</a>
        <a href="" class="nav__link">3</a>
        <a href="" class="nav__link">4</a>
        <a href="" class="nav__link">5</a>
   </nav>

Как с помощью гридов сделать пункты меню в строчку с инлайн шириной, равную контенту в них?

Comments

[Ankhena]

У меня вопрос: на кой черт вам сдались для этого гриды?

[profesor08]

Ankhena, с гридами код получается круче и результат

Answer 1

[profesor08]

.nav {
  display: grid;
  grid-auto-columns: 30px; // можно ограничить максимальный размер ячеек, если не хочется чтоб их растягивало на всю ширину, но можно сам контейнер не растягивать
  grid-auto-flow: column; // вот оно
  grid-gap: 5px;
}

Comments

[Алексей Орлов]

Спасибо, легче вообщем ссылки обернуть )