How to centralize cells in Material Components Web (MDC)?

Question

I want to have a centralized grid cells with, for example, 6 columns in desktop. In docs, it says:

The grid is by default center aligned. You can add mdc-layout-grid--align-left or mdc-layout-grid--align-right modifier class to change this behavior.

Then I type:

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">first</div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">second</div>
  </div>
</div>

Expecting on Desktop:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| ~ | ~ | ~ |   first   |  second   | ~  |  ~ | ~  |

Instead of what really outputs:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
|   first   |  second   | ~ | ~ | ~ | ~  |  ~ |  ~ |

How to make cells stays centralized?

Answer 1

With CSS Grid, you can specify a grid cell's start position using grid-column-start property.

So, in your illustrated example, you want your first cell to be placed at the 4th column:

// MDC Web's default desktop breakpoint is 840px.
@media (min-width: 840px) {
  .mdc-layout-grid__cell:first-child {
    grid-column-start: 4;
  }
}

If you have more than 2 cells in mdc-layout-grid__inner, you'll need to specify start position for every odd cell:

// Specify start position for odd cells.
// :nth-child(2n+1) is more flexible than :nth-child(odd)
// as you can use this pattern for 3, 4, etc. cells in a row (3n+1, 4n+1, etc.).
@media (min-width: 840px) {
  .mdc-layout-grid__cell:nth-child(2n+1) {
    grid-column-start: 4;
  }
}

Additionally, you can specify grid alignment for the flexbox fallback:

@media (min-width: 840px) {
  .mdc-layout-grid__inner {
    justify-content: center;
  }
}

You can view the demo on Codepen.

Answer 2

The grid is center aligned, the grid cell spacing is not aligned to the center of the grid (which you seem to assume). Thus, if you give the grid a width of 50% relative to its container, and make your cells have a span-width of 6, that will give the desired effect on desktop. Alternatively, you could add an empty cell with a span width of 3 before your first cell. But that's a bit harder to tune for other screen sizes (on tablet and phone the grid uses 8 and 4 cell widths by default).

Since the column span is 8 on tablet and 4 on phone, and you did not specify how you want your cells played out on such devices