防止内容扩展网格项目

TL; DR：table-layout: fixed CSS网格有什么类似的东西吗？

我试图用几个月的大4x3网格创建年视图日历，而白天则嵌套7x6网格。

日历应填满页面，因此Year网格容器的宽度和高度分别为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网格布局。但是，这个问题更多地是关于该主题的常识而不是解决具体示例。

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

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

你可以通过设置网格项目覆盖这种行为min-width: 0，min-height: 0或overflow比其它任何值visible。

从规格：

6.6。网格项目的自动最小大小

为网格项目，该规范定义了提供更合理的默认最小大小auto的值min-width/ min-height在指定的轴的自动最小尺寸也适用于它的网格项目overflow是visible。（效果类似于对弹性物品施加的自动最小尺寸。）

这是有关弹性项目的更详细说明，但它也适用于网格项目：

• 为什么弹性项目不能缩小到超过内容大小？

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

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

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

修改后的代码笔

1fr 与 minmax(0, 1fr)

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

• minmax（0，1fr）如何适用于长元素，而1fr不适用？

以前的答案是相当不错的，但我也想提一提，有是有固定的布局相当于为网格，你只需要编写minmax(0, 1fr)，而不是1fr为你的轨道的大小。

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

一个更容易的事情是像这样设置网格项的最大宽度：

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }