Question

TL; DR： CSS网格有table-layout: fixed之类的内容吗？

我尝试创建一个带有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 Layout的情况下设置日历的样式。然而，这个问题更多的是关于这个主题的一般知识，而不是解决具体的例子。

Answer 1

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

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

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

来自规范：

6.6. Automatic Minimum Size of Grid Items

为网格项提供更合理的默认最小大小，这个   规范定义auto / min-width的{{1}}值也将指定轴中的自动最小大小应用于min-height为overflow的网格项。（效果类似于对弹性项目施加的自动最小尺寸。）

以下是有关Flex项目的更详细说明，但它也适用于网格项目：

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

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

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

visible

revised codepen

.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 */ } vs 1fr

上述解决方案在网格项级别运行。对于容器级解决方案，请参阅以下文章：

How come minmax(0, 1fr) works for long elements while 1fr doesn't?

Answer 2

上一个答案非常好，但是我还想提到是一个与网格等效的固定布局，您只需要编写minmax(0, 1fr)而不是1fr作为您的曲目大小。

Answer 3

现有答案可以解决大多数情况。但是，我遇到了一种情况，我需要将网格单元格的内容设置为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

防止内容扩展网格项

3 个答案: