Question

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

网格默认居中对齐。您可以添加mdc-layout-grid-align-left或mdc-layout-grid-align-right修饰符类来更改此行为。

然后我输入：

scala> myrdd.getStorageLevel.useMemory
res3: Boolean = false

scala> myrdd.cache()
res4: myrdd.type = MapPartitionsRDD[2] at filter at <console>:29

scala> myrdd.getStorageLevel.useMemory
res5: Boolean = true

期待桌面：

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

如何让细胞保持集中？

Answer 1

网格中心对齐，网格单元格间距未与网格中心对齐（您似乎假设）。因此，如果您为网格指定相对于其容器的宽度为50％，并使您的单元格的跨度宽度为6，则会在桌面上产生所需的效果。或者，您可以在第一个单元格之前添加跨度宽度为3的空单元格。但是调整其他屏幕尺寸有点困难（在平板电脑和手机上，网格默认使用8和4个单元格宽度）。

由于平板电脑的列跨度为8，手机上的列跨度为4，因此您没有指定在单个设备上播放单元格的方式

Answer 2

使用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中有两个以上的单元格，则需要为每个奇数单元格指定起始位置：

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

Answer 3

这可以通过将每种类型的设备的网格单元范围指定为每个网格单元上特定设备的总数的一半，并将第一个单元格对齐到右边，将第二个单元格对齐到左边来实现。

因此，对于您的具体案例，这意味着：

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

如何在Material Components Web（MDC）中集中单元格？

3 个答案: