grid核心是容器直接分配空间，用fr按剩余空间比例划分，需容器有明确尺寸；混用固定值与fr时固定值优先；fr与%不可混用；minmax()防塌缩；auto-fit/auto-fill实现响应式列；行高推荐minmax()而非纯auto；空间分配由容器决定，子项尺寸无效。

直接用 grid-template-columns 和 grid-template-rows 控制空间分配，而不是靠子元素自己撑开或依赖 flex 那套逻辑 —— 这是 Grid 区别于其他布局最核心的一点。

用 fr 单位按比例分空间

fr 不是像素，也不是百分比，它代表“剩余可用空间的份数”。只要容器有明确尺寸（比如设置了 width 或在 flex/grid 容器中被约束），fr 才能正确计算。

• 写 grid-template-columns: 1fr 2fr，不是说第一列占 1/3、第二列占 2/3，而是：先扣掉所有固定尺寸（如 gap、显式设置的 px 列），再把剩下的空间按 1:2 切分
• 混用时注意优先级：grid-template-columns: 200px 1fr 2fr 中，200px 先占位，剩下空间才按 1:2 分给后两列
• fr 不能和 % 直接混用在同一轨道定义里，否则行为不可预测；想用百分比就统一用 %，想用弹性就全用 fr

用 minmax() 防止列塌缩或溢出

纯 1fr 在内容超宽或容器极窄时容易失控。加一层保护更稳妥：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr) 表示：每列最小 200px / 300px，最大不超过按比例分配的结果
• 搭配 auto-fit 或 auto-fill 实现响应式列数：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))) —— 容器够宽就多列，窄了自动回退为单列
• 注意：minmax(min, max) 中的 max 如果写成 1fr，实际效果等同于 minmax(min, 1fr)，但不会“超过”1fr；而写成 max-content 就可能撑爆容器

行高设为 auto 还是 minmax()？

多数情况下，grid-template-rows 不建议写死高度，尤其当内容长度不确定时：

• grid-template-rows: 100px auto 是常见组合：首行固定，其余行自适应内容高度
• 但 auto 可能导致相邻行高度差异过大；改用 minmax(80px, auto) 更可控 —— 至少 80px 高，内容多就继续撑开
• 如果所有行都用 auto，又没设 grid-auto-rows，新增项会落在隐式网格里，高度默认为 auto，但可能和显式定义的行列不一致

真正容易被忽略的是：Grid 的空间分配发生在容器渲染阶段，和子元素内部的 width/height 无关。哪怕你给子项写了 width: 500px，只要父容器列宽只有 300px，它照样被裁或换行 —— 所以调空间，永远从容器的 grid-template-* 入手，别在子项上硬调尺寸。

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