fr 是剩余空间的份数，如 1fr 2fr 1fr 将剩余空间分为4份；混用 fr 与 px 时 fr 仅分配扣除 px 后的剩余空间；需用 minmax() 或 clamp() 防布局崩溃，设 min-width: 0 防内容撑宽，并注意 auto 不拉伸、align-self 才控制子项填满。
fr 单位到底怎么分配剩余空间
fr 不是固定像素，而是“可用剩余空间的份数”。比如 grid-template-columns: 1fr 2fr 1fr，容器宽度减去所有确定尺寸（如 px、%、auto）占用后，剩下的空间被分成 4 份，三列分别占 1、2、1 份。
常见错误是混用 fr 和 px 后发现列宽“不对劲”——其实是 fr 只分剩余空间，不包含 px 列本身。例如：grid-template-columns: 200px 1fr 1fr，若容器宽 800px，则两个 1fr 共享 600px，各得 300px。
- 多个
fr相加为 0？浏览器会报错或退化为auto -
minmax(100px, 1fr)是安全写法：至少 100px，有余量再按份数扩 -
1fr和1fr 1fr在同一容器中效果不同——前者占全部剩余，后者平分剩余
px、%、auto、fit-content 怎么选
固定列宽用 px 最直观；但响应式场景下，% 易受父容器 padding 或 box-sizing 影响，不如 fr 可靠。auto 会让列宽由内容撑开，适合按钮、标签等短内容；fit-content(200px) 表示“最多 200px，内容少就缩”，比纯 max-content 更可控。
行高同理：grid-template-rows: 40px 1fr auto 中，第一行死定 40px，第二行填剩余，第三行随内容高度自适应。
立即学习“前端免费学习笔记（深入）”；
-
auto在 Grid 中不会拉伸，只取内容所需最小高度（除非配合align-items: stretch） -
%在grid-template-rows中需父容器有明确高度，否则无效 -
fit-content()内部值是最大限制，不是目标宽度
设置最小/最大尺寸避免布局崩溃
光写 1fr 很危险：小屏幕下可能把文字挤成一行超长，或图片被压扁。必须搭配 minmax() 或 clamp()。
例如：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) —— 每列至少 250px，多出空间就均分；容器缩小时自动换行。
-
minmax(min, max)中，min必须是确定值（px、em、min-content），max可为fr或max-content -
clamp(200px, 1fr, 400px)在 Grid 中支持度尚可（Chrome 91+、Firefox 95+），但 Safari 对fr在clamp()中的支持不稳定，慎用 - 设
min-width: 0在子项上，可防止fr列因内容过长（如 URL）而强行撑宽整列
行高设置容易被忽略的细节
Grid 的行高不像 Flex 那样默认拉伸子项。grid-template-rows 定义的是轨道（track）高度，但子元素是否填满，取决于其自身 height、align-self 和容器的 align-items。
比如你写了 grid-template-rows: 100px 1fr，第二行轨道高为剩余空间，但如果子元素没设 height: 100% 或没触发拉伸行为，它仍可能只显示内容高度。
- 让子项填满行轨道：设
align-self: stretch（默认值），且子项无height、min-height等硬性限制 - 文字垂直居中？仅靠
align-items: center不够，需确保行轨道有足够高度，且子项未用display: inline等破坏块级行为 -
row-gap是轨道之间的间距，不计入grid-template-rows值内
fr 只分剩余、auto 不拉伸、以及子项自身约束会覆盖轨道定义。动手前先用 outline: 1px solid red 套一层看轨道边界，比猜强得多。 
