title: How to centralize cells in Material Components Web (MDC)?
body: <p>I want to have a centralized grid cells with, for example, 6 columns in desktop. In <a href="https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid" rel="noreferrer">docs</a>, it says:</p>
  
  <blockquote>
    <p>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. </p>
  </blockquote>
  
  <p>Then I type:</p>
  
  <pre><code>&lt;div class="mdc-layout-grid"&gt;
    &lt;div class="mdc-layout-grid__inner"&gt;
      &lt;div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"&gt;first&lt;/div&gt;
      &lt;div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"&gt;second&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Expecting on Desktop:</p>
  
  <pre><code>| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
  |---|---|---|---|---|---|---|---|---|----|----|----|
  | ~ | ~ | ~ |   first   |  second   | ~  |  ~ | ~  |
  </code></pre>
  
  <p>Instead of what really outputs:</p>
  
  <pre><code>| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
  |---|---|---|---|---|---|---|---|---|----|----|----|
  |   first   |  second   | ~ | ~ | ~ | ~  |  ~ |  ~ |
  </code></pre>
  
  <p>How to make cells stays centralized?</p>