css Grid布局如何设置列宽与行高_通过fr、px等单位自定义尺寸

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 套一层看轨道边界，比猜强得多。