防止内容扩展网格项

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 Layout的情况下设置日历的样式.然而,这个问题更多的是关于该主题的一般知识而不是解决具体的例子.

Answer 1

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

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

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

从规格:

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

为了为网格项提供更合理的默认最小大小,此规范定义/ 的auto值还将指定轴中的自动最小大小应用于其为的网格项.(效果类似于弹性项目的自动最小尺寸.)min-widthmin-heightoverflowvisible

以下是有关flex项目的更详细说明,但它也适用于网格项目:

• 为什么弹性项目不会缩小内容大小？

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

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

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

修改后的codepen

1fr VS minmax(0, 1fr)

上述解决方案在网格项级别运行.对于容器级解决方案,请参阅此帖子:

• 为什么minmax(0,1fr)适用于长元素而1fr不适用？

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