Использование CSS Grid, где это уместно (повторно)

Это решение является продолжением моей прошлогодней статьи. «Использование CSS Grid, где это уместно». Цель состоит в том, чтобы найти решение для навигации с неизвестным количеством элементов.

Резюме

Создание навигации с помощью CSS Grid, возможно, не лучшее решение. Однако, если кто-то хочет использовать CSS Grid, было предложено два варианта:

• С использованием grid-auto-flow: row; и размещение каждого элемента в сетке, например:

.nav__item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 2;
}

• Определение определенной сетки с использованием ключевого слова auto для установки ширины строк и столбцов:

.nav {
  display: grid;
  grid-auto-flow: row;
}
@media screen and (min-width: 320px) {
  .nav {
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
  }
}

В обоих примерах мы определяем строгую сетку — количество столбцов в строке строго определено.

Новое решение

Я использую CSS Grid уже больше года, и за это время я научился правильно использовать его функции:

Код

Я развил предыдущее решение и обновил его функциями, упомянутыми выше. Вот окончательное решение.

.nav--grid2 {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fit, minmax(60px, auto));
  justify-content: center;
}

Давайте разберем этот фрагмент кода.

мин Макс()

minmax() Функция определяет размер как диапазон между минимальным и максимальным значением. Это позволяет определить динамический размер столбцов и строк.

Мы могли бы использовать это свойство, чтобы определить минимальную и максимальную ширину элемента навигации. В нашем примере мы используем следующее определение minmax:

minmax(60px, auto)

Мы говорим, что ширина столбца должна быть не менее 60 пикселей, а ширина должна быть равна максимальной ширине содержимого. Видеть auto ключевое слово Больше подробностей.

автоподгонка

auto-fit следует использовать как число повторений — число, используемое в repeat() функция. В нем говорится, что сетка должна размещать как можно больше элементов, например, когда элементы пусты (я думаю 🤔).

сетка-автопоток

grid-auto-flow — это свойство, которое управляет тем, как работает алгоритм сетки для размещения элементов. В нашем примере мы используем dense ключевое слово. В нем говорится, что сетка должна заполнять дыры, которые могут остаться при появлении более крупных элементов сетки.

выравнивание содержания

justify-content свойство выравнивает содержимое блока. мы используем justify-content: center чтобы выровнять содержимое элементов по центру.

Бонус: отсутствие медиа-запросов

Как видите, мы не использовали медиа-запросы. Медиа-запросы полезны и без них, и не было бы адаптивного веб-дизайна, но это так приятно, когда мы можем создать адаптивное поведение без его использования.

Последние мысли

CSS Grid по-прежнему может быть не лучшим подходом для элемента навигации, но он работает. Всегда пытайтесь использовать CSS Grid там, где это уместно, даже если это решит вашу проблему. Если вы бунтарь, игнорируйте эту мысль и тем не менее используйте ее — при создании веб-решений не существует правил, если ваши пользователи довольны. 😎