Centering columns in CSS Grid - html

Question

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 there a way to create the __centered utility class, so that I can apply it to center columns? I know I could add empty column divs 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>

Answer 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;
}
<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
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;
}
<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 demo
NOTE: This solution only centers even-numbered grid areas.