如何在Material Design布局网格中实现最多32列的单行布局？

嘿，这个问题我之前碰到过类似的，咱们直接说可行的解决方案，帮你搞定这个32列的日期网格！

方案一：直接修改MDC网格的列数限制 #

MDC的默认12列是通过CSS规则控制的，咱们可以自定义样式来覆盖这个限制，不用改框架源码，很方便：

1. 首先给你的网格容器加一个自定义类，比如mdc-grid-list--32-columns
2. 然后写对应的CSS规则，调整每个tile的宽度：

/* 自定义32列网格的样式 */
.mdc-grid-list--32-columns {
  /* 如果MDC用了CSS变量，直接修改变量更优雅 */
  --mdc-grid-list-tile-width: calc(100% / 32);
}

.mdc-grid-list--32-columns .mdc-grid-list__tile {
  width: calc(100% / 32) !important;
  /* 可选：调整间距，保持布局美观，比如修改gap或者margin */
  margin: 2px;
}

这样你的网格容器就能容纳32个元素在一行里了，完全兼容MDC的其他样式。

方案二：自定义Flex/Grid布局（更灵活） #

如果觉得修改MDC默认样式有点别扭，不如自己写个轻量的布局容器，把MDC的组件放进去，既保持视觉统一，又不受12列限制：

比如用CSS Grid实现：

.custom-date-grid {
  display: grid;
  grid-template-columns: repeat(32, 1fr);
  gap: 6px; /* 按需调整元素间距 */
  width: 100%;
}

/* 可以复用MDC的样式类，让文字符合MDC的排版规范 */
.custom-date-grid__item {
  @extend .mdc-typography--body2;
  text-align: center;
}

然后HTML里直接用这个自定义容器：

<div class="custom-date-grid">
  <!-- 动态生成的每个日期项：<div class="custom-date-grid__item">标签+天数</div> -->
</div>

这个方法自由度更高，不用纠结MDC的默认规则，还能和MDC的其他组件样式完美配合。

关于嵌套列的可行性 #

你提到嵌套div会换行，其实是因为MDC的网格子元素默认会占满父容器的宽度，嵌套后子容器的宽度被限制在父tile的1/12里，自然会换行。这种方式不仅复杂，还容易出现对齐问题，非常不推荐。不如上面两种方案直接高效。

选哪个方案看你的需求：如果想尽量贴合MDC的生态，用方案一；如果想要完全自定义布局，用方案二，都能完美实现1个标签+当月天数的32列网格。

内容的提问来源于stack exchange，提问作者Gabriel Guarnieri Cardoso