Alineación de elementos de grilla en toda la fila / columna (como elementos flexibles)

Con un contenedor flex-wrap: wrap ajuste flex-wrap: wrap ajuste el conjunto, puede alinear los elementos desbordados al centro utilizando justify-content: center .

¿Hay alguna manera de lograr el mismo comportamiento para los elementos de la grilla que se desbordan utilizando la cuadrícula CSS?

Creé un bolígrafo que muestra el comportamiento de flexión deseado

 .container-flex { display: flex; flex-wrap: wrap; justify-content: center; } .container-flex .item { width: 33.33%; background: green; border: 1px solid; } .container-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .container-grid .item { background: red; border: 1px solid; } * { box-sizing: border-box; } 
 

Flex

item
item
item
item
item
item
item

Grid

item
item
item
item
item
item
item

https://codepen.io/JoeHastings/pen/PeEjjR

Flex y Grid son animales diferentes, por lo que un comportamiento simple en flex puede no trasladarse bien a la grilla.

Un elemento flexible puede centrarse en el contenedor porque el diseño flexible funciona con líneas flexibles . Una línea flexible es una fila o columna.

Cuando se le pide a un elemento flexible que se centre en una fila / columna, tiene acceso al espacio disponible en toda la línea, de principio a fin.

Sin embargo, en el diseño de la cuadrícula, las líneas de cuadrícula tienen que lidiar con algo que las líneas de flexión no tienen: rastrear muros . Por ejemplo, en tu código hay tres columnas. Estas columnas dividen la línea de la cuadrícula en tres secciones separadas, y los elementos de la grilla están confinados a una sección.

Por lo tanto, un elemento de la cuadrícula no se puede centrar en una fila utilizando propiedades de alineación de palabras clave (como justify-content ) porque las paredes que separan las columnas restringen el movimiento. Este problema no existe en las líneas flexibles.

Para que el elemento de la cuadrícula se centre en la fila, el contenedor debería tener solo una columna (es decir, sin separadores), o el elemento tendría que trasladarse explícitamente al centro utilizando algo parecido a la colocación basada en líneas .

No de la manera que quieras con flex. Tienes que ser preciso con CSS-Grid,

 

Grid

item
item
item
item
item
item
item
.container-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .item { background: red; border: 1px solid; } .item-mid{ background:purple; grid-column:2/1; }

Además, mira aquí,

Centrado en CSS Grid

(Esto no está envolviendo, sin embargo)