grid-template-columns不支持百分比值，50%会被静默忽略；应改用1fr 1fr或minmax(0,1fr) minmax(0,1fr)实现等分。
grid-template-columns里写50%为什么没用
因为grid-template-columns不接受百分比值作为轨道尺寸——它只认长度单位（px、em）、fr、auto、minmax()，以及明确的函数如fit-content()。你写50%会被浏览器静默忽略，回退到auto或触发错误解析。
常见错误现象：
- 开发者复制了 Flex 的
flex: 0 0 50%习惯，直接套到 Grid 列定义里 - 在响应式媒体查询中误以为
grid-template-columns: 50% 50%能像width: 50%那样工作 - 用 JS 动态注入 CSS 字符串时拼错了单位，比如漏掉
fr
正确做法是改用 fr 或 minmax()：
.grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 等分 */
/* 或 */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
fr 和 % 在 Grid 里到底怎么算的
fr 不是百分比，它是“剩余可用空间的份数”。它的计算分两步：先扣除所有固定尺寸（px、auto内容宽、minmax下限等），再把剩下的空间按份数分配。
而百分比宽度（如子元素设 width: 50%）是相对于**Grid 容器的内容区宽度**计算的——但这个宽度本身又受 grid-template-columns 影响，形成嵌套依赖。
关键差异点：
-
1fr可能最终小于容器宽度的 50%，比如旁边有200px固定列时 -
width: 50%子元素若内容很长（如未折行 URL），会触发min-width: auto，撑开整列，导致fr分配失衡 -
fr默认受内容最小宽度（min-content）限制；要突破它，得显式写minmax(0, 1fr)或min-width: 0
为什么加了 max-width 的 Grid 容器里，fr 还是超宽
根本原因不是 fr 错了，而是 max-width 没生效——Grid 容器本身成了父 Flex/Grid 里的弹性子项，没被赋予基准尺寸，max-width 就失去参照。
必须同步设置约束尺寸：
- 给 Grid 容器加
width: 100%（最通用）或inline-size: 100%（逻辑属性，支持 RTL） - 确认父容器不是
display: flex或display: grid且未设width——否则子 Grid 会按内容撑开 - 检查是否用了
grid-template-columns: repeat(3, 1fr)却忘了内容本身有min-width，导致单列实际宽度远超1fr理论值
示例修复：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1200px;
width: 100%; /* 关键：提供计算 fr 的基准 */
margin: 0 auto;
}
子元素 width: 50% 在 Grid 里为什么看起来“不准”
Grid 子项（grid item）的 width 属性默认不参与主轴布局计算——它的作用只是影响内容盒，而列宽由 grid-template-columns 决定。所以你给子项设 width: 50%，它可能被裁剪、溢出，或根本看不出效果。
真正可控的方式是：
- 用
grid-column: span 2显式跨列（适合已知列数） - 在
grid-template-columns中用minmax(0, 2fr)配合1fr实现比例（如 2:1） - 避免混用：
width+grid-column容易冲突；width+flex更是双重失控 - 调试时打开浏览器的 Layout 面板，看“Grid”叠加层，确认列轨道是否真按你写的分配，而不是被内容撑变形
复杂点在于：fr 单位和百分比看似都讲“比例”，但一个管轨道分配，一个管内容盒尺寸——它们不在同一层面上起作用，强行混用只会让问题更难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
