Centrar columnas en CSS Grid

Intento crear una cuadrícula de CSS simple usando las propiedades de cuadrícula CSS nativas. Funciona como yo quería, excepto que quiero crear una clase de utilidad que pueda centrar una columna en una grilla.

¿Hay alguna manera de crear la clase de utilidad __centered , para que pueda aplicarla a columnas centrales? Sé que podría agregar divisiones de columna vacías antes de la columna, pero quiero una solución más limpia.

 .l-wrap { width: 100%; max-width: 1196px; margin: 0 auto; } .l-grid { display: grid; grid-gap: 52px; grid-template-columns: repeat(6, 1fr); background-color: orangered; } .l-grid--col { grid-column: auto/span 6; } .l-grid--col-1 { grid-column: auto/span 1; background-color: lightblue; } .l-grid--col-2 { grid-column: auto/span 2; background-color: lightblue; } .l-grid--col-3 { grid-column: auto/span 3; background-color: lightblue; } .l-grid--col-4 { grid-column: auto/span 4; background-color: lightblue; } .l-grid--col-5 { grid-column: auto/span 5; background-color: lightblue; } .l-grid--col-6 { grid-column: auto/span 6; background-color: lightblue; } 
 

This should span 2 and be centered.

EDITAR: No estoy seguro por qué, pero la pregunta se degrada. Tal vez debido a codesnippet en pug / sass. Así que lo cambié a HTML / CSS.

CSS Grid proporciona las propiedades justify-items y justify-self , que se pueden usar para alinear elementos de cuadrícula a lo largo del eje de fila.

justify-items aplica al contenedor de la grilla. justify-self aplica a los elementos de la grilla.

Entonces su clase de utilidad puede verse más o menos así:

 .l-grid__centered { justify-self: center; grid-column: 1 / -1; } 

Esto le dice al elemento de la cuadrícula que se centre en la fila en un área de cuadrícula que abarca desde la primera hasta la última columna. ( Los valores enteros negativos en grid-column y grid-row inician el recuento desde el lado final ) .

 .l-wrap { width: 100%; max-width: 1196px; margin: 0 auto; } .l-grid { display: grid; grid-gap: 52px; grid-template-columns: repeat(6, 1fr); background-color: orangered; } .l-grid--col { grid-column: auto/span 6; } .l-grid--col-1 { grid-column: auto/span 1; background-color: lightblue; } .l-grid--col-2 { grid-column: auto/span 2; background-color: lightblue; } .l-grid--col-3 { grid-column: auto/span 3; background-color: lightblue; } .l-grid--col-4 { grid-column: auto/span 4; background-color: lightblue; } .l-grid--col-5 { grid-column: auto/span 5; background-color: lightblue; } .l-grid--col-6 { grid-column: auto/span 6; background-color: lightblue; } .l-grid__centered { justify-self: center; grid-column: 1 / -1; } 
 

This should span 2 and be centered.