LeshaGFB
@LeshaGFB
Верстальщик

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

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>


Как с помощью гридов сделать пункты меню в строчку с инлайн шириной, равную контенту в них?
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
profesor08
@profesor08
.nav {
  display: grid;
  grid-auto-columns: 30px; // можно ограничить максимальный размер ячеек, если не хочется чтоб их растягивало на всю ширину, но можно сам контейнер не растягивать
  grid-auto-flow: column; // вот оно
  grid-gap: 5px;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы