防止内容展开网格项

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网格布局。然而，这个问题更多的是关于主题的常识，而不是解决具体的例子。

220929 次浏览
小开
最佳答案

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

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

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

来自规范:

6.6。自动最小网格大小 项目< /强> < / > < / p > 为网格项提供更合理的默认最小大小，此 规范定义了min-width / min-height的auto值也对overflow为visible的网格项应用指定轴上的自动最小大小。(效果类似于施加在伸缩项目上的自动最小尺寸。)

下面是一个关于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 */
}

jsFiddle demo

1fr vs minmax(0, 1fr)

上面的解决方案在网格项级别上操作。对于容器级的解决方案，请参阅这篇文章:

小开

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

小开

现有的答案解决了大多数情况。然而，我遇到了需要网格单元格的内容为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);
}

< a href = " https://codepen。io / bjnsn /钢笔/ vYYVPZv noreferrer“rel = > https://codepen.io/bjnsn/pen/vYYVPZv < / >


提交答案