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

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.