css 想实现两列等宽布局怎么办_grid-template-columns repeat 2 1fr

必须显式设置父容器 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 控制