Material Components Web（MDC）でセルを集中化する方法は？

Question

たとえば、デスクトップに6列の集中グリッドセルが必要です。 docsでは、

グリッドはデフォルトで中央揃えになっています。この動作を変更するには、mdc-layout-grid-align-leftまたはmdc-layout-grid-align-right修飾子クラスを追加します。

それから私は、入力します。

デスクトップに期待

<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> 

：

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

代わりに実際に出力するもので：

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

集中したままどのように細胞を作るには？

Answer 1

グリッドが中央揃えで、グリッドのセルの間隔がグリッドの中央に揃っていません（想定しているようです）。したがって、グリッドにコンテナに対して50％の幅を与え、セルのスパン幅を6にすると、デスクトップに望ましい効果が得られます。また、最初のセルの前にスパン幅3の空のセルを追加することもできます。しかし、これは他の画面サイズ（タブレットと電話機ではデフォルトで8と4のセル幅を使用する）で調整するのが少し難しいです。

列スパンは電話でタブレットと4に8で、あなたはあなたの細胞は、CSSのグリッドにそのようなデバイス

Answer 2

に出て演奏する方法を指定していない、あなたはgrid-column-start propertyを使用してグリッドセルの開始位置を指定することができますので、 。だから、

、あなたの図示の例では、あなたが最初のセルが4列目に配置されるようにしたい：

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

また、あなたはフレキシボックスフォールバック用のグリッド・アライメントを指定することができます。

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

をthe demo on Codepenを表示できます。