限制内容扩展的网格项

Question

TL;DR: 是否有类似于table-layout: fixed的CSS网格布局的属性？

---

我试图创建一个年视图的日历，其中有一个4x3的大网格用于月份，内部嵌套的是7x6的网格用于日期。

日历应该填满整个页面，所以年份网格容器的宽度和高度都设置为100%。

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

这是一个可工作的示例：https://codepen.io/loilo/full/ryXLpO/

为了简单起见，该示例中的每个月份都有31天，并且从星期一开始。

我还选择了一个非常小的字体大小来演示问题：

网格项（即日期单元格）非常紧凑，因为页面上有几百个日期单元格。而且一旦日期标签变得太大（请随意使用左上角的按钮在示例中调整字体大小），网格就会增大并超出页面的边界。

有没有办法阻止这种行为？

我最初将年份网格的宽度和高度设置为100%，所以这可能是开始的地方，但我找不到任何与网格相关的CSS属性来满足这个需求。

免责声明：我知道有很简单的方法来样式化这个日历，而不使用CSS Grid布局。然而，这个问题更多关于对该主题的一般知识，而不是解决具体的例子。

Answer 1

之前的答案非常好，但我还想提到，对于网格来说，也有一种固定布局的等效方法，你只需要将你的轨道大小写为minmax(0, 1fr)而不是1fr。

Answer 2

默认情况下，网格项的大小不能小于其内容的大小。

网格项的初始大小为min-width: auto和min-height: auto。

您可以通过将网格项设置为min-width: 0，min-height: 0或overflow（除visible之外的任何值）来覆盖此行为。

来自规范：

这是一个更详细的解释，涵盖了弹性项，但也适用于网格项：

• 为什么弹性项不能缩小到内容大小以下？

这篇文章还涵盖了嵌套容器的潜在问题和主要浏览器之间的已知渲染差异。

---

要修复您的布局，请对您的代码进行以下调整：

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* 新增 */
  min-width: 0;   /* 新增；Firefox需要 */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* 新增 */
  min-width: 0;      /* 新增；Firefox需要 */
}

jsFiddle演示

---

1fr与minmax(0, 1fr)

上面的解决方案是在网格项级别上操作的。对于容器级别的解决方案，请参阅以下文章：

• 为什么对于长元素，minmax(0, 1fr)有效而1fr无效？