Estoy tratando de crear una cuadrícula CSS simple utilizando las propiedades de la cuadrícula CSS nativa. Funciona como quería, excepto que quiero crear una clase de utilidad que pueda centrar una columna en una cuadrícula.

¿Hay alguna manera de crear el__centered clase de utilidad, para que pueda aplicarlo a las 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;
}

<div class="l-wrap">
  <div class="l-grid l-grid__centered">
    <div class="l-grid--col-2">
      <p>This should span 2 and be centered.</p>
    </div>
  </div>
</div>

EDITAR: No estoy seguro de por qué, pero la pregunta se rechaza. Tal vez por codenippet en pug / sass. Entonces lo cambié a HTML / CSS.