Orden inverso de columnas en CSS Grid Layout

Recuerda que en la informática un error puede tener más de una resoluciones, así que nosotros te enseñamos lo mejor y más óptimo.

Solución:

A medida que el algoritmo de colocación automática de cuadrícula dispone elementos en el contenedor, utiliza siguiente disponible celdas vacías (fuente).

En su código fuente, el elemento A viene antes que el elemento B:

   
A
   
B

Por lo tanto, el contenedor de cuadrícula primero coloca A, luego usa el siguiente espacio disponible para colocar B.

De forma predeterminada, el algoritmo de colocación automática mira linealmente a través de la cuadrícula sin retroceder; si tiene que saltarse algunos espacios vacíos para colocar un elemento más grande, no volverá a llenar esos espacios. Para cambiar este comportamiento, especifique el dense palabra clave en grid-auto-flow.

^{http://www.w3.org/TR/css3-grid-layout/#common-uses-auto-placement}

---

grid-auto-flow: dense

Una solución a este problema (como ha notado) es anular el valor predeterminado grid-auto-flow: row con grid-auto-flow: dense.

Con grid-auto-flow: denseel algoritmo de colocación automática de cuadrícula buscará rellenar las celdas desocupadas con elementos que encajen.

#container 
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-auto-flow: dense; /* NEW */

7.7. Colocación automática: la grid-auto-flow
propiedad

Los elementos de la cuadrícula que no se colocan explícitamente se colocan automáticamente en un espacio desocupado en el contenedor de la cuadrícula mediante el algoritmo de colocación automática.

grid-auto-flow controla cómo funciona el algoritmo de colocación automática, especificando exactamente cómo los elementos colocados automáticamente fluyen hacia la cuadrícula.

dense

Si se especifica, el algoritmo de ubicación automática utiliza un algoritmo de empaquetamiento “denso”, que intenta llenar los huecos antes en la cuadrícula si aparecen elementos más pequeños más tarde. Esto puede hacer que los artículos parezcan desordenados, cuando al hacerlo se llenarían los huecos que dejan los artículos más grandes.

#container 
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-auto-flow: dense; /* NEW */


.a 
  background: yellow;


.b 
  background: blue;
  color: white;


#container>.a 
  grid-column: 1;


#container>.b 
  grid-column: 2;


#container.reverse>.a 
  grid-column: 2;


#container.reverse>.b 
  grid-row: 1;
  grid-column: 1;

  
A
  
B

---

grid-row: 1

Otra solución sería simplemente definir la fila para el segundo elemento.

#container>.b 
  grid-column: 2;
  grid-row: 1; /* NEW */

#container 
  display: grid;
  grid-template-columns: 240px 1fr;


.a 
  background: yellow;


.b 
  background: blue;
  color: white;


#container>.a 
  grid-column: 1;


#container>.b 
  grid-column: 2;
  grid-row: 1; /* NEW */


#container.reverse>.a 
  grid-column: 2;


#container.reverse>.b 
  grid-row: 1;
  grid-column: 1;

  
A
  
B

Si bien las soluciones anteriores funcionan para este ejemplo específico, no es la forma adecuada de resolver su pregunta. Hay una propiedad CSS a la que se adhiere Grid Layout llamada direction. direction: rtl le dará lo que pide la pregunta. Es compatible con todos los navegadores compatibles con Grid Layout.

#container 
  grid-template-columns: 240px 1fr;
  display: grid;


#container.reverse 
  direction: rtl;


.a 
  background: yellow;


.b 
  background: blue;
  color: white;

direction: unset

  
A
  
B


direction: rtl

  
A
  
B

No estoy seguro de cómo invertir más elementos de la cuadrícula. Pero si tiene 2 elementos de cuadrícula en su cuadrícula, simplemente puede colocar el segundo elemento de cuadrícula usando el código a continuación.

#container > .b 
    grid-column-start: 1;
    grid-row-start: 1;

Te mostramos comentarios y valoraciones

---

---

Utiliza Nuestro Buscador