超过12列的材料设计布局网格

Posted 2023-02-22

【中文标题】超过12列的材料设计布局网格

【英文标题】：Material design layout grid more than 12 colum

【发布时间】：2018-07-23 03:15:54

【问题描述】：

我正在尝试创建一个网格，每个月的每一天都有一列。 所以我在一行中最多需要 32 列（第一个标签 + 一个月中的天数）

我正在使用 for 来动态添加 div。

<section>
    <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__inner">
            @
                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1">
                    Days:
                </div>
                for (var i = 1; i <= Model.TotalDays; i++)
                
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-1">@Model.GetDateStringFromDay(i)</div>
                
            
        </div>
    </div>
</section>

这给了我每行 12 个值，因为 MDC 是基于 12 列的。 我尝试创建嵌套的 div，但它最终为每个新级别添加了新行。

有办法吗？使用嵌套列或以某种方式覆盖默认 MDC 行为以允许单行中有更多列？

【问题讨论】：

我尝试在 @material/layout-grid 导入之前为 24 列定义 SASS 变量 $mdc-layout-grid-columns，但没有效果。我可能误解了一些东西，但是I raised a bug anyway.

【参考方案1】：

如果您使用的是 Sass，则可以使用 Sass 变量覆盖 Layout Grid 上的列数：

$mdc-layout-grid-columns: (
  desktop: 12,
  tablet: 8,
  phone: 4
);

但这将应用于您标记中的所有 MDC-Web 布局网格。

【讨论】：

是的，这会搞砸一切。不幸的是，我需要一些东西才能应用于这个网格

【参考方案2】：

尝试为此使用嵌套网格。 https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid#nested-grid

在布局网格中创建 4 个等分单元格。为此使用单元格 3。 3 X 4 = 12

在每个单元格中，创建一个嵌套的 mdc-layout-grid__inner，其中每个单元格 1 有 8 个单元格。最终结果将是 8 x 4 = 32 个单元格。