材料设计布局网格大于12列

Question

我正在尝试创建一个每个月的每一天都有一列的网格。因此，我需要在单行中最多32列(第一个标签+每月的天数)

我正在使用一个

对于

为了动态添加div。

@{
                
                    Days:
                
                for (var i = 1; i <= Model.TotalDays; i++)
                {
                    @Model.GetDateStringFromDay(i)
                }
            }

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

有没有办法做到这一点？使用嵌套列或以某种方式覆盖默认的MDC行为，以允许在单行中有更多列？

Answer 1

如果使用的是Sass，则可以使用Sass变量覆盖布局网格上的列数：

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

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

Answer 2

尝试使用嵌套网格。

https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid#nested-grid

在布局网格中创建4个等分的单元格。为此，请使用cell-3。3 x 4= 12

在每个单元格中，创建一个嵌套的mdc-layout-grid

_

_

内部，每个cell-1有8个cell。最终结果将是8 x 4= 32个单元格。