Заполнение CSS Grid колонками, а не рядами: решение

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

Для того чтобы элементы в контейнере располагались сначала по столбцам, а потом по строкам, необходимо присвоить значению свойства grid-auto-flow: column;. Это позволит сетке начать заполнение с вертикального расположения элементов.

.container {
  display: grid;
  grid-auto-flow: column;
}

Благодаря данной настройке элементы изначально размещаются в столбец с верху вниз. Таким образом, мощный инструмент CSS Grid теперь работает так, как вам требуется!

Разбираемся с grid-auto-flow

Давайте подробнее рассмотрим работу свойства grid-auto-flow. Оно определяет порядок, в котором элементы добавляются в сетку. По умолчанию его значение — row, что сопоставляется с последовательным заполнением строк (слева направо и сверху вниз), примерно как расположение товаров на витрине магазина.

Изменяя значение на grid-auto-flow: column;, мы, условно говоря, меняем роль браузера на библиотекаря, который располагает книги на полке: сначала заполняет один столбец, а затем переходит к следующему. Таким образом, "строка" становится "столбцом", а традиционное горизонтальное расположение меняется на вертикальное.

.container {
  display: grid;
  grid-auto-flow: column;
}

Однако стоит учитывать нюансы: если вы не зададите количество столбцов, может создаться потенциально бесконечная последовательность столбцов. Так что использование grid-auto-flow: column; требует обдуманного применения.

Адаптируем сетку под ваш контент

Воспользуйтесь свойством grid-template-columns, чтобы ограничить количество элементов в одном столбце:

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, 1fr);
}

С помощью функции repeat() создаем четыре столбца равной ширины.

Рассматриваем grid-gap

Не забывайте предоставлять пространство между элементами для "дыхания". Свойство grid-gap помогает предотвращать слияние элементов:

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

Учтите, что свойство gap не может быть анимировано, в отличие от некоторых других CSS свойств.

Работаем с динамическим содержимым

Для коррекции стилей в зависимости от действий пользователя или изменении содержимого используйте JavaScript, работая через CSS Object Model (CSSOM).

Решаем сложности CSS Grid

Используйте grid-column или многоколоночные макеты для достижения совместимости браузеров или управления более сложной структурой, когда одного CSS Grid мало:

.container {
  display: grid;
  grid-auto-flow: column;
  column-count: 3;
}

Визуализация

Мы стараемся добиться перехода от горизонтального заполнения к вертикальному:

Традиционная сетка (📚📘📙📗)
| 📚 | 📘 | 📙 | 📗 |
| ___| ___| ___| ___|
| ___| ___| ___| ___|

Желаемое направление заполнения:

| 📚 | 📚 | 📚 | 📚 |
| 📘 | 📘 | 📘 | ___|
| 📙 | ___| ___| ___|
| 📗 | ___| ___| ___|
# Книги располагаются по столбцам слева направо

Выставляем CSS следующим образом:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Свойство grid-auto-flow: column; обеспечивает нужную нам направленность заполнения — сверху вниз, а затем по столбцам.

Передовые стратегии CSS Grid

Используйте grid-column, чтобы растягивать элементы на несколько столбцов или точно позиционировать их. Многоколоночный макет может быть идеальным, если CSS Grid не справляется, особенно при работе с текстом или в устаревших браузерах, где помочь может column-count.

Совершенствуем ваши сетки

Не забудьте овладеть многоколоночными макетами. Они могут быть полезны при вертикальном расположении текста или когда использование CSS Grid кажется слишком сложным.

Добавляем изысканные нюансы

Для создания выразительности используйте inline-grid для отображения контейнеров как инлайновых блоков или приложите transform для динамического преобразования элементов.

Помните, что использование расширенных CSS-технологий требует обдуманного подхода, чтобы не нарушить консистентность вашего дизайна.

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

1. CSS сеточный макет – CSS: каскадные таблицы стилей | MDN
2. Полное руководство по CSS Grid | CSS-Tricks
3. Примеры сетки
4. Основные понятия макета сетки – CSS: каскадные таблицы стилей | MDN
5. Grid Garden – игра для изучения макета сетки CSS
6. Создание готовых к внедрению макетов CSS Grid сегодня — Smashing Magazine
7. Сценарии использования Flexbox — Smashing Magazine