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 网格布局来设计日历样式。不过,这个问题更多的是关于该主题的常识,而不是解决具体的例子。
默认情况下,网格项的大小不能小于其内容的大小。
网格项的初始大小为 min-width: auto
和 min-height: auto
。
你可以通过将网格项设置为 min-width:0
、min-height:0
或 overflow
(除 visible
以外的任何值)来覆盖此行为。
来自规范:
6.6.网格的自动最小尺寸 项目 >; 为了为网格项提供更合理的默认最小尺寸,本 规范定义了 "最小宽度"/"最小高度 "的 "自动 "值也会在指定坐标轴上对 "溢出 "为 "可见 "的网格项自动应用最小尺寸。(其效果类似于对柔性项施加的自动最小尺寸)。
以下是关于柔性项目的更详细解释,但也适用于网格项目:
这篇文章还涉及嵌套容器的潜在问题,以及已知的主要浏览器之间的渲染差异。
要修复布局,请对代码进行以下调整:
.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
vs minmax(0, 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);
}