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

Estoy usando una cuadrícula de CSS para diseñar algunos elementos como este …

#container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 20px; margin: 10px; } 
 
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

¿Cómo puedo hacer que la última fila se centre en lugar de alinear a la izquierda? No puedo garantizar la cantidad de artículos, por lo que quiero que el diseño se vea bien para cualquier cantidad de artículos.

¿Es esto algo en lo que debería estar usando flexbox? ¿O las redes CSS son un uso adecuado?

Creo que la solución más simple sería usar flexbox con justify justify-content: center .

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

En las filas totalmente 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), se produce el centrado.

 #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; } 
 
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

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

Sin embargo, en función del hecho de que defina un ancho de conjunto que coincida con n elementos dentro del ancho de la ventana gráfica, puede usar Flexbox y su propiedad justify justify-content .

Establézcalo en el center y centrará la última fila para cualquier cantidad de elementos.

Fragmento de stack

 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 */ } 
 
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item

Eso frustra el propósito de un sistema de grillas. 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 donde los artículos se envuelvan. Flexbox encaja 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 no será ninguno y tendrá su tamaño estándar.

Si desea que el contenedor se clasifique automáticamente, elimine la propiedad de width y el contenedor y sus elementos se redimensionarán automáticamente. Está bien, pero supongo que quiere definir la cantidad de artículos en una fila.

Esta es mi solución (desde el 23 de abril de 2018):

 #wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-row-gap: 0; grid-column-gap: 15px; padding: 15px 15px 0 15px; } .item { border: 1px solid #000; height: 200px; margin-bottom: 15px; } 
 
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
See all items

Esto debería centrar cualquier elemento dentro de la fila sin usar flex

 .center-item { grid-column: 1 / -1; } 

No trabajé mucho en grids, pero hasta donde yo sé, si quieres usar Flex-box utiliza este código.

 #container { display: flex; flex-wrap: wrap; flex-direction: row; } .item { flex: 1; flex-basis: 16.66%; background: teal; color: white; padding: 20px; margin: 10px; } 
 
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item
Item