аюсь создать простую CSS-сетку, используя собственные свойства CSS Grid. Это работает, как я хотел, за исключением того, что я хочу создать служебный класс, который может центрировать столбец в сетке.

Есть ли способ создать__centered служебный класс, чтобы я мог применить его к центру столбцов? Я знаю, что могу добавить пустые div столбца перед столбцом, но я хочу более чистого решения.

.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>

РЕДАКТИРОВАТЬ: Не уверен почему, но вопрос получает отрицательный ответ. Возможно из-за кодсниппета в мопсе / сассе. Поэтому я изменил его на HTML / CSS.