默认情况下，网格项目不能小于其内容的大小。
网格项目的初始大小为
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; min-width: 0; }.day-item { padding: 10px; background: #DFE7E7; overflow: hidden; min-width: 0; }
