Определение конкретного столбца в CSS grid layout: методы

Быстрый ответ

Для того чтобы позиционировать ячейки, используйте свойства grid-column и grid-row. Формат записи start/end определяет диапазон позиционирования:

.item {
  grid-column: 2 / span 2; /* Занимает 2 столбца, начиная со второго */
  grid-row: 1 / span 2;    /* Размещается на 2 ряда, начиная с первого */
}

В данном примере элемент .item будет занимать пространство размером 2 на 2 клетки. Его расположение будет начинаться от второго столбца и первого ряда, как в игре "Морской бой". 🚢

Детальное описание позиционирования элементов в grid

A. Выбор строки: каждая третья

Если нужно разместить каждый элемент в отдельный ряд, удобно использовать свойство grid-auto-rows в сочетании с псевдоклассом :nth-child:

.grid-container > *:nth-child(3n) {
  grid-row: 3;   /* Каждый третий элемент перемещается в третий ряд */
}

Подробнее об этом расскажет наш спикер на видео

B. Выбор столбца: первый столбец

При желании выбрать конкретный столбец, применяйте свойства grid-template-columns и nth-child:

/* Сетка с тремя колонками */
.grid-container > *:nth-child(3n+1) {
  background-color: deepskyblue; /* Вуаля – первый столбец подсвечен в нужный цвет */
}

CSS не предоставляет возможности напрямую выбирать столбцы, точно так же, как это мог бы сделать Волшебный Школьный Автобус из детства. Однако нам доступны трюки, например, 3n+1, позволяющий подсветить первый столбец в трёхстолбчатой сетке.

C. Специфические ситуации

При необходимости создания сетки с обратным порядком столбцов или комбинации выбора строк и столбцов, CSS оказывается несколько ограниченным. Разметка вашего HTML должна строиться таким образом, чтобы соответствовать ваших задачам в контексте сетки.

Анализ адаптивной сетки

I. Отзывчивость и медиазапросы

Адаптация сетки под различные размеры экранов обычно обеспечивается с помощью медиазапросов, которые устанавливают правила поведения элементов:

@media (max-width: 768px) {
  .item {
    grid-column: 1 / -1; /* Занимающий всё доступное пространство элемент – потому что мобильным устройствам тоже требуется внимание ♡ */
  }
}

II. В ожидании subgrid

Новая возможность CSS Grid Level 2, именуемая subgrid, позволит создавать макеты, где сетки вкладываются друг в друга, увеличивая возможности для описания сложных сеточных макетов:

.item {
  display: grid;
  grid-template-rows: subgrid; /* Вложенные сетки – как воображаемый сон! */
}

Визуальное представление

Сетку можно воспринимать как план города с улицами (рядами) и проспектами (колонками):

|      | Проспект 1 | Проспект 2 | Проспект 3 |
|------|------------|------------|------------|
| Ул. 1| 🏢🏢🏢       | 🌳🏢🌳       | 🚗🚧🚗       |
| Ул. 2| 🏠🏡🏘       | 🌳🌳🌳       | 🚕🚦🚕       |
| Ул. 3| 🏬🏤🏣       | 🌳🏪🌳       | 🛴🚧🛴       |

Предположим, все здания 🏢🏠🏤 на **Проспекте 2** подготовлены к работам по реконструкции.

/* Градоначальник – CSS-сетка – определяет нормативы для всех "строений" на "Проспекте 2" */
.grid-container > :nth-child(2n) {
    background-color: gold; /* Золото для тех, кто идет в ногу со временем! */
}

Градоначальник манипулирует селектором :nth-child, grid-column и grid-row, управляя размещением элементов, как строительные блоки в игре Тетрис.

Методы оптимизации

Управление пользовательскими свойствами

Пользовательские свойства (CSS-переменные) делают код аккуратнее:

:root {
  --target-column: 2; /* Определяем значение переменной один раз – используем неограниченное число раз */
}

.grid-container > *:nth-child(var(--target-column)n) {
  color: crimson; /* Как маяк среди однообразности */
}

Не забываем о доступности

Помните о важности того, что любые изменения в сетке должны быть доступны для всех пользователей, в том числе использующих скринридеры.

Будущее CSS Grid

Будущие версии CSS и развитие стандартов в перспективе позволят напрямую ориентироваться на столбцы и предоставят другие мощные функции, например, :nth-col(), внедрение которых уже не за горами.

Полезные материалы

1. Полное руководство по CSS Grid | CSS-Tricks
2. grid-column – CSS | MDN
3. grid-row – CSS | MDN
4. Модуль макета CSS Grid уровня 1
5. Учебник по сеткам | DigitalOcean
6. Создание макетов на основе CSS Grid в стиле "каменщика" — Smashing Magazine