Centering columns in a CSS grid

Question

I am trying to create a simple css grid using my own CSS grid properties. It works the way I wanted, except that I want to create a utility class that can center a column in the grid.

Is there a way to create a utility class __centeredso that I can apply it to the centers of the columns? I know that I can add empty column separators before the column, but I want a cleaner solution.

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

Run code

EDIT: I don't know why, but the question went down. Possibly due to code words in pug / sass. So I changed it to HTML / CSS.

Answer 1

CSS Grid justify-items justify-self, .

justify-items . justify-self .

, :

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

, . ( grid-column grid-row .)

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

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

jsFiddle demo

. , . , . .

---

, , , :

.__centered {
  grid-column: 3 / span 2;
 }

.__centered {
  grid-column: 3 / -3; 
 }

.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 {
  grid-column: 3 / span 2;
  text-align: center;
}

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

jsFiddle

. .