css - 防止内容扩展网格项

Question

TL;DR:是否有类似 table-layout: fixed 的 CSS 网格？

---

我尝试创建一个年 View 日历，其中月份为 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 网格布局的情况下设置日历的样式。但是，这个问题更多的是关于该主题的一般知识，而不是解决具体的例子。

Answer 1

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

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

您可以通过将网格项设置为 min-width: 0、min-height: 0 或 overflow 任意值来覆盖此行为除了可见。

来自规范:

6.6. Automatic Minimum Size of GridItems

To provide a more reasonable default minimum size for grid items, thisspecification defines that the auto value of min-width / min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible. (The effect is analogous to the automatic minimum size imposed on flex items.)

这里有一个关于 flex 元素的更详细的解释，但它也适用于网格元素:

• Why don't flex items shrink past content size?

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

---

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

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

jsFiddle demo

---

1fr 与 minmax(0, 1fr)

上述解决方案在网格元素级别运行。有关容器级别的解决方案，请参阅这篇文章:

• Who does minmax(0, 1fr) work for long elements while 1fr doesn't?