答案是：若computed值为none或auto，说明行列尺寸完全由内容驱动，css未生效。打开devtools的computed面板搜索grid-template-rows/columns即可确认；此时align-items: stretch无效，需显式定义轨道。

检查 computed grid-template-rows/columns 是否为 none 或 auto

浏览器默认不显式设置行高列宽，grid-template-rows 和 grid-template-columns 的 computed 值若为 none 或 auto，说明行列尺寸完全由内容驱动，不是你写的 CSS 生效了——而是根本没写或被覆盖。打开 DevTools → Elements → 右侧 Computed 面板，直接搜 grid-template-rows，一眼就能确认是否“定锚”。没定锚的 Grid，align-items: stretch 就只是个摆设。

用 border + outline 快速暴露轨道边界

Grid 轨道本身不可见，但你可以用视觉手段逼它现形：

• 给 Grid 容器加 outline: 1px solid red，看整体是否撑满预期尺寸
• 给每个直接子元素加 border: 1px solid blue，再配合 box-sizing: border-box，立刻看出哪些项实际占位超出轨道（比如图片没设 height: 100% 就会撑高整行）
• 临时把 gap 改成 gap: 10px 并加背景色，能清晰区分轨道间隙和内容内边距

验证 minmax() 里有没有漏单位

minmax(300, 1fr) 是无效写法，300 没单位，浏览器当非法值丢弃，整条 minmax() 退化为 1fr，导致列宽失控拉伸。常见于从 JS 计算后拼字符串注入 CSS 时忘了加 px。正确写法必须是 minmax(300px, 1fr) 或 minmax(20rem, 1fr)。DevTools 的 Styles 面板里如果看到该属性被划掉（strikethrough），八成就是单位缺失。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

auto-fit 列数不生效？先盯住容器宽度上下文

repeat(auto-fit, minmax(200px, 1fr)) 不起作用，往往不是 Grid 写错了，而是容器没宽度：

• 父级是 display: inline-block 或 float，且没设 width
• Grid 容器本身用了 position: absolute 但没配 left/right/width
• 在 flex 容器里，flex 项没设 flex: 1 或 width: 100%，导致可用空间为 0

临时加 background: rgba(0,0,0,0.1) 看容器是否真占位，比猜更可靠。

调试 Grid 行列尺寸，最常被忽略的是：你以为在调样式，其实是在调**容器约束条件**——宽度、高度、box-sizing、甚至父级布局模式，都比 grid-template-columns 本身更容易成为瓶颈。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！