css - Alinear elementos de la cuadrícula en toda la fila/columna(como pueden hacerlo los elementos flexibles)

css3 flexbox

Question

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

¿Hay alguna manera de lograr el mismo comportamiento para desbordar elementos de la cuadrícula utilizando la cuadrícula CSS?

He creado una pluma 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;
}

<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

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

Answer 1

Flex y Grid son animales diferentes, por lo que un comportamiento que es simple en flex no se traduce bien en grid.

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 cuadrícula, las líneas de cuadrícula tienen que lidiar con algo que las líneas flexibles no tienen: los muros de seguimiento . Por ejemplo, en su código hay tres columnas. Estas columnas dividen la línea de la cuadrícula en tres secciones separadas, y los elementos de la cuadrícula se limitan a una sección.

Por lo tanto, un elemento de la cuadrícula no puede centrarse en una fila utilizando las propiedades de alineación de palabras clave (como justify-content o justify-self ) porque los muros 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 a lo largo de la fila, el contenedor debería tener solo una columna (es decir, sin divisores), o el elemento debería moverse explícitamente al centro utilizando algo como la ubicación basada en líneas . De lo contrario, utilice flexbox.

Answer 2

No de la manera que quieres con flexión. Tienes que ser preciso con CSS-Grid,

<h3>Grid</h3>
<div class="container-grid">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item-mid">item</div>
</div>
.container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
    .item {
        background: red;
        border: 1px solid;
    }
    .item-mid{
        background:purple;
        grid-column:2/1;
    }

También, mira aquí,

Centrado en CSS Grid

(Esto no es envolver, sin embargo)