Сетка на CSS Grid с элементами разной ширины

При вёрстке макетов часто требуется, чтобы некоторые блоки в сетке занимали меньше места, чем остальные. Например, элементы 3, 4 и 8 должны быть уже соседних. Рассмотрим, как реализовать такую сетку на CSS Grid без использования отдельных контейнеров - все блоки остаются в едином родителе.

Исходная задача

Есть общий контейнер с восемью элементами. Нужно, чтобы третий, четвёртый и восьмой блоки были уже остальных. Остальные элементы занимают стандартную ширину (например, 1fr). Важно: нельзя оборачивать элементы в дополнительные контейнеры - вся вёрстка строится на одном родителе.

Решение на CSS Grid

CSS Grid позволяет управлять шириной отдельных ячеек с помощью свойств grid-column и grid-row. Чтобы сделать элементы уже, можно задать им grid-column: span 1 (или меньше), а остальным - grid-column: span 2 (или больше). Но проще использовать ключевое слово auto и min-content.

Пошаговая реализация

1. Создайте контейнер с display: grid.
2. Задайте grid-template-columns: repeat(4, 1fr) - 4 колонки равной ширины.
3. Для элементов 3, 4 и 8 укажите grid-column: span 1 (они займут одну колонку).
4. Остальным элементам задайте grid-column: span 2 (две колонки).

Пример кода:

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

.item:nth-child(n) {
  grid-column: span 2; /* стандартная ширина */
}

.item:nth-child(3),
.item:nth-child(4),
.item:nth-child(8) {
  grid-column: span 1; /* узкие элементы */
}

Альтернативный способ с grid-template-columns

Можно явно описать колонки: grid-template-columns: 2fr 2fr 1fr 2fr 2fr 2fr 2fr 1fr. Но такой подход менее гибкий при добавлении новых элементов. Лучше использовать span для каждого блока.

Адаптация под мобильные устройства

На маленьких экранах сетку можно перестроить в одну колонку с помощью медиазапроса:

@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .item {
    grid-column: span 1 !important;
  }
}

Почему не Flexbox?

Flexbox сложнее управлять разной шириной элементов в сетке с переносом строк. CSS Grid даёт точный контроль над положением и размером каждого блока, поэтому для данной задачи он предпочтительнее.

Теперь вы знаете, как сделать сетку с элементами разной ширины на Grid без лишних контейнеров. Используйте nth-child и grid-column для точной настройки макета.