必须显式设置父容器 display: grid，否则 grid-template-columns: repeat(2, 1fr) 无效；该写法等价于 1fr 1fr，实现两等宽列，配合 gap 可安全添加间距，无需手动计算。
直接用 grid-template-columns: repeat(2, 1fr) 就行，但得确保父容器是 Grid
很多人写了这行 CSS 却没效果，根本原因是没把父元素设为 display: grid。Grid 布局不会自动激活，必须显式声明。
-
repeat(2, 1fr)等价于1fr 1fr，表示两列各自占剩余空间的等份 - 如果父容器宽度不够（比如被内容撑窄或受
max-width限制），两列会压缩但依然等宽 - 别在子元素上写
grid-column或grid-row，除非你有意控制具体位置；默认子元素按源顺序依次填入网格单元格
常见错误：子元素溢出、换行或错位
典型现象是两列没并排、第二列掉到下一行，或者内容撑破容器。这往往不是 repeat() 写错了，而是：
- 父容器没设
display: grid，导致 CSS 被忽略 - 子元素用了
float、display: inline-block或width: 100%，和 Grid 冲突 - 父容器有
gap但没预留足够空间，尤其当子元素含 padding/margin 时 - 用了
grid-auto-flow: column（按列填充），而默认是row（按行填充）——多数场景该用默认值
想加间隙又保持等宽？用 gap，别动 1fr
加间距不该靠给列写 1fr 1fr 再手动减宽度，那样破坏响应性。正确做法是保留 repeat(2, 1fr)，单独加 gap：
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}浏览器会自动从总宽中扣除 gap 后再均分给两列，无需计算百分比或像素。
立即学习“前端免费学习笔记（深入）”；
-
gap是row-gap和column-gap的简写，对两列布局来说主要影响列间空隙 - 如果只想要列间有空隙、上下不留白，写
column-gap: 16px更精准 - IE 不支持
gap（需用grid-column-gap+grid-row-gap，且仅适用于 Grid 容器）
兼容旧浏览器或需要更灵活控制时，1fr 不是唯一解
如果项目要支持 Safari 9–10 或早期 Edge，1fr 可能不生效。此时可退回到固定比例写法：
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Safari 10.1+ OK */
/* 或 fallback */
grid-template-columns: 50% 50%;
}但注意：50% 50% 在有 gap 时会溢出，因为百分比不自动避让间隙；而 1fr 1fr 会自动适配。
- 真正容易被忽略的是：Grid 布局中，
1fr的“剩余空间”是减去所有明确尺寸（如200px列、gap、padding）之后的空间，不是父容器 width 的简单除法 - 如果其中一列内容特别长（比如超长单词或未折行文本），可能撑开整列，另一列也会被迫等宽——这时要配合
min-width: 0或overflow-wrap: break-word控制
