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

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

Answer 2

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 3

This can be accomplished by specifying the grid cell span for each type of device to be half the total for the particular device on each grid cell and by aligning the first cell to the right and the second to the left.

So for your specific case that would mean:

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid--align-right
      mdc-layout-grid__cell--span-6-desktop
      mdc-layout-grid__cell--span-4-tablet
      mdc-layout-grid__cell--span-2-phone">first</div>
    <div class="mdc-layout-grid__cell mdc-layout-grid--align-left
      mdc-layout-grid__cell--span-6-desktop
      mdc-layout-grid__cell--span-4-tablet
      mdc-layout-grid__cell--span-2-phone">second</div>
  </div>
</div>