Reordenar columnas en un diseño de cuadrícula CSS

En el diseño de cuadrícula CSS, existen varias técnicas para modificar el orden de las columnas para lograr diseños específicos. Esta pregunta explora la posibilidad de reorganizar las columnas para diseños móviles, como mover una columna hacia la parte inferior mientras se mantiene el orden deseado de las columnas en diseños de escritorio.

Opciones de solución:

1. grid-template-areas: Esta propiedad le permite definir áreas con nombre dentro de la cuadrícula y luego asignar elementos de la cuadrícula a esas áreas. Al utilizar áreas con nombre, puede controlar el diseño y el orden de los elementos sin depender de su orden inicial en el código fuente.
2. Ubicación basada en líneas: Con la ubicación basada en líneas, puede utilice las propiedades grid-column-* para especificar la columna en la que se debe colocar un elemento. Al asignar elementos de la cuadrícula a columnas específicas, puede controlar su orden y posiciones dentro de la cuadrícula.
3. propiedad de orden: La propiedad de orden le permite definir el orden en el que aparecen los elementos de la cuadrícula, independientemente de su orden inicial en el código fuente. Al especificar valores de orden, puede determinar la secuencia visual de los elementos dentro de la cuadrícula.
4. función densa de grid-auto-flow: La función densa de grid-auto-flow optimiza el diseño de la cuadrícula ajustando automáticamente la ubicación de los elementos de la cuadrícula para llenar el espacio disponible de la manera más eficiente posible. Se puede utilizar para lograr el diseño móvil en la pregunta, donde los elementos se mueven a nuevas líneas según sea necesario para adaptarse al tamaño de pantalla más pequeño.

Código de muestra:

El siguiente ejemplo demuestra el uso de la función grid-auto-flow: denso para lograr el diseño móvil descrito en la pregunta:

.container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense; /* optimizes item placement */
}

Con este código, los elementos de la cuadrícula se reorganizarán automáticamente para llenar el espacio disponible de manera eficiente, lo que dará como resultado el diseño móvil deseado.