7

我想有一个集中的网格单元，例如桌面中有 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   | ~ | ~ | ~ | ~  |  ~ |  ~ |

如何让cell保持中心化？

4

3 回答 3

2

grid-column-start使用 CSS Grid，您可以使用property指定网格单元格的起始位置。

因此，在您的示例中，您希望将第一个单元格放置在第 4 列：

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

如果您有超过 2 个单元格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;
  }
}

此外，您可以为弹性盒后备指定网格对齐方式：

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

您可以在 Codepen 上查看演示。

于 2018-01-07T06:08:23.173 回答
1

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

因此，对于您的具体情况，这意味着：

<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>
于 2018-06-08T07:00:29.540 回答
1

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

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

于 2017-12-09T10:48:00.913 回答