Centering Columns In Css Grid

I'm trying to create a simple css grid using the native CSS Grid properties. It works as I wanted, except I want to create a utility class that can center a column in a grid. Is th

Solution 1:

CSS Grid provides the justify-items and justify-self properties, which can be used for aligning grid items along the row-axis.

justify-items applies to the grid container. justify-self applies to grid items.

So your utility class can look something like this:

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

This tells the grid item to center itself on the row in a grid area spanning from the first to last columns. (Negative integer values on grid-column and grid-row start the count from the end side.)

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

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

jsFiddle demo

NOTE: The utility class is applied to the grid item, not the grid container. Also, this method breaks the 2-column grid area of the original content. The centered content will be able to expand across the entire row.

---

Alternatively, when working with a six-column grid, to horizontally center a two-column grid area, your utility class can look like this:

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

OR

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

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

jsFiddle demo

NOTE: This solution only centers even-numbered grid areas.