CSS Grid含底部对齐footer等高布局最后一行渲染异常问题

你遇到的异常不是CSS Grid浏览器支持不完善导致的，是两处代码写法问题引发的兼容差异：

• 全局div样式污染：你给所有div元素统一设置了border和padding，Grid容器.example1本身也是div，也会被应用该样式，同时单元格的宽高计算没有统一盒模型，导致width:100%加上border、padding后超出Grid预设的300px宽度，不同浏览器对溢出的解析逻辑不同就出现了宽度异常。
• 嵌套table布局的兼容问题：用table相关布局实现footer底部对齐的方式，和Grid的拉伸高度计算逻辑存在冲突，不同浏览器解析高度规则不一致，引发行高异常。

修改CSS代码即可，HTML结构不需要调整：

1. 全局统一盒模型为border-box，确保padding、border不会额外撑大元素尺寸
2. 取消全局div的边框、内边距设置，仅给单元格单独设置对应样式
3. 用flex布局替换table布局实现footer底部对齐，和Grid的适配性更好，兼容表现更一致

修改后完整CSS代码 #

/* 全局统一盒模型 */
* {
  box-sizing: border-box;
}

.example1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  align-items: stretch;
  gap: 1rem; /* 控制单元格间距，可按需调整 */
  padding: 1rem; /* 仅给Grid容器单独加内边距，不需要可以删掉 */
  border: solid 1px; /* 仅给Grid容器单独加边框，不需要可以删掉 */
}

.contentdiv {
  background-color: red;
  border: solid 1px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.foot {
  margin-top: auto; /* 自动把footer顶到容器底部 */
  padding-top: 1rem; /* 可按需调整内容和footer的间距 */
}

修改后可以完全满足你的三个需求：

• 单元格数量无限制，auto-fill会自动根据容器宽度调整每行的单元格数量
• 同一行所有单元格高度自动保持一致，所有footer都对齐到单元格底部
• 不存在宽高异常问题，兼容Safari、Chrome等主流浏览器的常规版本

内容的提问来源于stack exchange，提问作者James Hudson