<p><strong>TL;DR:</strong> 是否有类似于<code>table-layout: fixed</code>的CSS网格布局的属性？</p> <hr /> <p>我试图创建一个年视图的日历，其中有一个4x3的大网格用于月份，内部嵌套的是7x6的网格用于日期。</p> <p>日历应该填满整个页面，所以年份网格容器的宽度和高度都设置为100%。</p> <pre class="brush:php;toolbar:false;">.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); }</pre> <p>这是一个可工作的示例：https://codepen.io/loilo/full/ryXLpO/</p> <p>为了简单起见，该示例中的每个月份都有31天，并且从星期一开始。</p> <p>我还选择了一个非常小的字体大小来演示问题：</p> <p>网格项（即日期单元格）非常紧凑，因为页面上有几百个日期单元格。而且一旦日期标签变得太大（请随意使用左上角的按钮在示例中调整字体大小），网格就会增大并超出页面的边界。</p> <p>有没有办法阻止这种行为？</p> <p>我最初将年份网格的宽度和高度设置为100%，所以这可能是开始的地方，但我找不到任何与网格相关的CSS属性来满足这个需求。</p> <p><em>免责声明：</em>我知道有很简单的方法来样式化这个日历，而不使用CSS Grid布局。然而，这个问题更多关于对该主题的一般知识，而不是解决具体的例子。</p>

.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需要 */
}