¿Cómo centrar elementos en la última fila en CSS Grid?

Solución:

CSS Grid no es adecuado para la alineación en toda una fila debido a que las pistas entrecruzadas bloquean el camino. Aquí hay una explicación detallada:

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

Como alternativa, use flexbox con justify-content: center.

Esto empaqueta todos los elementos en el centro horizontal de la fila. Entonces tus márgenes los separan.

En filas completamente llenas, justify-content no tendrá ningún efecto ya que no hay espacio libre para que funcione.

En las filas con espacio libre (en su caso, solo la última fila), los elementos están centrados.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}

<div id="container">
  <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 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 class="item">Item</div>
</div>

Eso frustra el propósito de un sistema de cuadrícula. Una cuadrícula es una matriz bidimensional donde todo tiene un valor X e Y, como una hoja de cálculo.

Sí, quieres un sistema en el que los artículos se envuelvan. Flexbox encaja a la perfección aquí debido a flex-wrap.

#container {
  padding: 10px;
  width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */
  display: flex;
  flex-wrap: wrap;
  background: blue;
  margin: 10px;
}

#container div {
  width: 100px;
  height: 100px;
  flex-grow: 1;
  background: red;
  margin: 10px;
}

https://jsfiddle.net/0c0hzh8t/

Esto hace que los niños ocupen todo el espacio disponible, que si la fila está llena será ninguno y será su tamaño estándar.

Si desea que el contenedor se dimensione automáticamente, retire el width propiedad y el contenedor y sus elementos cambiarán de tamaño automáticamente. Está bien, pero supongo que desea definir la cantidad de elementos en una fila.

No existe una propiedad específica para hacer que la última fila se comporte de manera diferente a la anterior.

Aún así, basado en el hecho de que defina un ancho establecido que coincida norte elementos dentro del ancho de la ventana gráfica, puede utilizar Flexbox y su justify-content propiedad.

Ponlo en center y centrará la última fila para cualquier número de elementos.

Fragmento de pila

html, body {
  margin: 0;
}

#container {
  display: flex;
  flex-wrap: wrap;                  /*  allow items to wrap  */
  justify-content: center;          /*  horizontally center items  */
}

.item {
  flex-basis: calc(16.666% - 20px); /*  subtract the margin from the width  */
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;           /*  make padding be included in the set width  */
}

<div id="container">
  <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 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 class="item">Item</div>
  <div class="item">Item</div>
</div>

---

---

Utiliza Nuestro Buscador