231

TL;DR：有没有类似table-layout: fixedCSS 网格的东西？

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

4

3 回答 3

405

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

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

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

从规范：

6.6. 网格项目的自动最小尺寸

为了给网格项提供一个更合理的默认最小尺寸，本规范定义了/的auto值也将指定轴上的自动最小尺寸应用于其为 的网格项。（效果类似于强加于弹性项目的自动最小尺寸。）min-widthmin-heightoverflowvisible

下面是关于弹性项目的更详细的解释，但它也适用于网格项目：

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

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

.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 演示

1fr对比minmax(0, 1fr)

上面的解决方案在网格项级别运行。有关容器级别的解决方案，请参阅这篇文章：

于 2017-04-09T21:50:17.523 回答
116

前面的答案很好，但我还想提一下，网格有一个固定的布局，你只需要写minmax(0, 1fr)而不是1fr你的轨道大小。

于 2018-09-18T06:54:16.507 回答
5

现有的答案解决了大多数情况。但是，我遇到了需要网格单元的内容为overflow: visible. 我通过在包装器中绝对定位来解决它（不理想，但我知道的最好的），如下所示：


.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

于 2019-11-14T20:00:29.777 回答