能实现，但必须显式设置height或max-height并配overflow-y: auto，且自定义滚动条仅webkit可靠；firefox和移动端不支持进阶定制。

Grid容器高度没设，overflow就等于没写

给 grid 容器加了 overflow: auto 却没滚动条？大概率是容器本身没高度约束。浏览器不知道“溢出谁”，overflow 就不会触发。

• 必须显式设置 height、max-height 或 min-height（推荐 max-height）
• 如果用了 grid-template-rows: 1fr，得确保父容器有可计算的高度来源（比如 height: 100vh 或上层设了 height）
• 父级若为 display: flex，且没设 flex-shrink: 0 或高度限制，它可能把 Grid 容器压扁——此时 Grid 高度算出来是 0

长单词/URL撑开列宽，不是样式漏了，是 min-width: auto 在作怪

CSS Grid 项默认带 min-width: auto，它的值等于内容最小固有宽度（比如一串无空格的哈希值）。哪怕你写了 overflow-wrap: break-word，也拦不住它强行撑列。

• 解决方法不是加更多 word-break，而是打断这个默认行为：给网格项加 min-width: 0
• 配合 overflow: hidden 或 overflow-wrap: anywhere（比 break-word 更可靠）
• 别只对文本元素设，要作用在直接包裹文本的网格项上（通常是 .card 或 .item 这类容器）

移动端列数错乱，repeat(3, 1fr) 是个硬编码陷阱

写死 repeat(3, 1fr)，小屏下不会自动降为 2 列或 1 列——它只会把每列压窄，导致文字挤成一团或溢出容器。

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

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

下载

• 换成 repeat(auto-fit, minmax(280px, 1fr))：每列至少 280px，容器不够宽就自动减少列数
• auto-fit 会合并空轨道，auto-fill 会渲染所有可能列（含空列），影响语义和可访问性
• 280px 是经验值，但要注意父容器 padding。例如 padding: 20px 下，iPhone SE 实际可用宽度只剩 280px，minmax(280px, 1fr) 就会退化成单列

卡片高度不一致，align-items: stretch 反而让布局割裂

Grid 默认 align-items: stretch，一列内容多、一列内容少时，整行会被拉高，空卡片显得“塌陷”或留白过大。

• 改用 align-items: start，让所有项从顶部对齐
• 卡片自身设 min-height: 120px（根据字体大小和行高定），避免视觉失衡
• 内部图文混排时，别对 img 设 height: 100%，优先用 aspect-ratio: 4/3 + object-fit: cover

真正容易被忽略的是：很多截断问题不是样式没加全，而是高度约束和内容弹性之间的博弈没理清——比如 grid-auto-rows 没设、min-width: 0 忘了加、或者 auto-fit 的最小宽度没扣掉 padding。这些点不调，光靠媒体查询补救，只会越调越乱。

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