Сделать строки охватывающими несколько столбцов

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

Размещение на основе строк:

Наиболее распространенный подход — размещение на основе строк, при котором вы указываете начало и конец строки столбца:

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

Явная область сетки:

Используйте свойство Grid-area, которое явно определяет занятые ячейки:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

Отрицательные значения:

Отрицательные значения в Grid-column или Grid-column-start могут использоваться для правого размещение слева:

grid-column: -2 / -1;  // Spans the last 2 columns

Зажим строки столбца:

Этот метод использует ограничение строки, чтобы расширить конечную точку строки до доступного пространства:

grid-column: auto;
grid-column-end: 100%;

Автоматическое изменение размера с минимумом:

Автоматическое изменение размера с минимальной шириной гарантирует, что строка займет как минимум указанное количество столбцы:

grid-column: auto;
min-width: 400px;

Пример:

Чтобы растянуть строку навигации по всем столбцам:

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

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