css - 如何在 Material Components Web (MDC) 中集中单元格？

Question

我想要一个集中的网格单元格，例如，在桌面上有 6 列。在 docs ，它说:

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.

然后我输入:

<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

使用 CSS Grid，您可以使用 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;
  }
}

如果 mdc-layout-grid__inner 中有超过 2 个单元格，则需要为每个奇数单元格指定起始位置:

// 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;
  }
}

此外，您可以为 flexbox 回退指定网格对齐方式:

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

可以查看the demo on Codepen .