JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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