Hacer que las filas abarquen varias columnas

Las filas en CSS Grid se pueden configurar para abarcar varias columnas usando las propiedades de cuadrícula apropiadas. Aquí se explica cómo lograr esto:

Ubicación basada en líneas:

El enfoque más común es mediante la ubicación basada en líneas, donde se especifican las líneas de inicio y fin de columna:

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

Área de cuadrícula explícita:

Utilice la propiedad grid-area, que define explícitamente las celdas ocupadas:

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

Valores negativos:

Los valores negativos en grid-column o grid-column-start se pueden usar para la derecha- ubicación hacia la izquierda:

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

Sujeción de línea de columna:

Esta técnica utiliza sujeción de línea para extender el punto final de la fila al espacio disponible:

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

Tamaño automático con mínimo:

El tamaño automático con un ancho mínimo garantiza que la fila ocupe al menos un número específico de columnas:

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

Ejemplo:

Para estirar la fila de navegación en todas las columnas:

  

    ...
  
  ...

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

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

Al aplicar uno de estos métodos, puede extender filas o columnas en varias columnas en CSS Grid, creando diseños complejos y flexibles.