子元素被grid-template-columns/rows拉伸的根本原因是轨道尺寸强制撑开子项且未尊重其min-width/min-height，应改用minmax(min-content,1fr)替代纯fr，并配合min-width:0、max-width:100%等约束。

子元素被 grid-template-columns/rows 拉伸怎么办

根本原因是轨道尺寸（如 1fr、200px）强制撑开子项，而子项自身 min-width 或 min-height 未被尊重。Grid 默认会拉伸子项填满轨道，这不是 bug，是 align-items: stretch 和 justify-items: stretch 的正常行为。

• 别直接给子项设 width: 100% 或 height: 100%——这反而加剧拉伸，尤其在嵌套 flex 容器里
• 改轨道定义：用 minmax(min-content, 1fr) 替代纯 1fr，让列宽至少容纳内容最小可撑开宽度（比如按钮文字）
• 对图片、iframe 等固有尺寸元素，额外加 max-width: 100% 和 height: auto，防止 Grid 轨道硬拉
• 若需彻底禁用拉伸，父容器设 align-items: start 和 justify-items: start，再单独用 align-self/justify-self 控制个别项

align-items: stretch 导致高度不一致视觉错觉

实际高度是等高的，但你看到“不等高”，大概率是子项内边距、字体行高、margin-bottom 或空格换行造成的视觉偏差，不是 Grid 失效。

• 检查是否误加了 align-self: start 到某个子项——它会覆盖容器级 align-items
• 避免给子项设固定 height、max-height 或 flex: 1（在非 flex 子容器中）
• 如果子项是 flex 容器，确保它没设 height: 100%（相对谁？轨道高度可能为 0），改用 align-self: stretch（默认已有）
• IE11 不支持 stretch 行为，必须降级处理：JS 计算最大高度或放弃等高

响应式下小屏仍被压缩的 minmax 失效问题

minmax(280px, 1fr) 在小屏失效，不是写错了，而是浏览器按 min-content 计算时，被子项默认 min-width: auto 或长单词卡住。

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

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

下载

• 必须配合子项 min-width: 0（尤其空 div、flex 容器、图片父容器）
• 文本要加 overflow-wrap: break-word，否则一个长 URL 就让 min-content 变得极小
• 慎用 minmax(0, 1fr)：它能释放收缩能力，但可能触发内容截断，仅当子项内有 flex-direction: column 且已设 min-width: 0 时才安全
• gap 要同步调小：grid-gap: 0.5rem 比 1rem 更适应窄屏，避免 padding + gap 把内容推出视口

aspect-ratio 容器里内容还是变形？

aspect-ratio 只管容器宽高比，不管里面的内容怎么铺。图片、视频不加 object-fit，照样被拉伸。

立即学习“前端免费学习笔记（深入）”；

• 子项上直接写 aspect-ratio: 16 / 9 即可，无需 wrapper
• img 或 video 必须配 width: 100%; height: 100%; object-fit: cover（或 contain）
• 旧浏览器兼容用 padding-bottom hack：子项设 position: relative，内部元素 position: absolute 占满
• 避免在 auto-fit 布局里混用 aspect-ratio —— 列宽变，但 aspect-ratio 固定，容易错位；优先用 auto-fill 保轨道

真正难的不是写对某一行 CSS，而是意识到：Grid 拉伸不是异常，而是默认契约；你要做的不是对抗它，而是用 minmax、min-width: 0、align-items 这些开关，精准地关掉不需要的部分。