最新浏览器是否不支持CSS Grid的justify-content: stretch属性？

这不是浏览器兼容性问题，是你对justify-content: stretch的生效规则和配置遗漏导致的问题，原因和修复方案如下：

核心原因 #

justify-content: stretch的作用是拉伸网格轨道以填充容器剩余空间，前提是网格轨道没有设置固定的刚性尺寸：
你当前代码里将grid-template-columns设为了三个固定的50px，轨道总宽度是固定值（150px + 间隙宽度），没有可伸缩的空间基础，浏览器自然无法拉伸轨道。

修复方案 #

如果要实现轨道拉伸占满容器的效果，需要将列宽改为可伸缩的尺寸类型，比如用auto、fr单位或者minmax()包裹可伸缩值，示例修改如下：

.grid-container.stretch {
  background-color: #9996f3;
  justify-content: stretch;
  /* 替换固定列宽为可伸缩配置，下面两种任选：
  1. 三个列等宽拉伸占满容器 */
  grid-template-columns: repeat(3, 1fr);
  /* 2. 列宽最小为50px，最大可拉伸填充剩余空间
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  */
}

额外说明 #

• 你代码里的justify-content: centre属于拼写错误，正确属性值是center
• 当你使用fr单位定义轨道尺寸时，默认就会自动拉伸占满容器，不需要额外显式声明justify-content: stretch

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