Reorganizar las columnas de CSS Grid

Introducción

CSS Grid proporciona un sistema de diseño flexible para contenido web, incluida la capacidad de controlar el orden y la posición de columnas. Esta pregunta profundiza en cómo cambiar el orden de las columnas dentro de una cuadrícula CSS.

Propiedad Grid-template-areas

Un método para reorganizar las columnas de la cuadrícula es mediante la propiedad grid-template-areas. Esto le permite definir áreas específicas dentro de la cuadrícula y asignar columnas a esas áreas. Por ejemplo:

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

Esto movería el elemento col3 al principio de la fila, seguido por el elemento col1.

Ubicación basada en líneas

También puedes usar la ubicación basada en líneas para controlar el orden de las columnas. Esto implica colocar elementos de la cuadrícula uno tras otro a lo largo de las líneas de la cuadrícula, con las propiedades "grid-column-start" y "grid-column-end" determinando las ubicaciones inicial y final.

Por ejemplo, para colocar el Elemento col3 después del elemento col1:

.col3 {
  grid-column-start: 2;
}

Propiedad de orden

La propiedad de orden establece el orden de los elementos de la cuadrícula dentro de una pista. Los valores inferiores a 0 colocan el elemento antes del inicio de la pista, mientras que los valores superiores a 0 lo colocan después del final de la pista.

Para mover el elemento col3 a la primera posición:

.col3 {
  order: -1;
}

Función densa

La función densa de la propiedad grid-auto-flow también se puede utilizar para reorganizar las columnas de la cuadrícula. Alinea los elementos en el espacio disponible, comenzando desde el principio del contenedor de la cuadrícula, omitiendo las celdas vacías de la cuadrícula.

Para mover el elemento col3 al inicio de la segunda fila:

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

Al implementar estas técnicas, puede reorganizar dinámicamente las columnas de la cuadrícula para cumplir con los requisitos de diseño deseados en diferentes tamaños de pantalla u orientaciones del dispositivo.