最直接定义两列宽度的方式是设display: grid并用grid-template-columns，如1fr 1fr（等宽）、200px 1fr（左固定右自适应）、minmax(200px,1fr) 2fr（左弹性右权重）；需防子项溢出，加word-break、overflow-wrap和min-width:0；响应式改单列应整套重写grid-template-columns；gap和justify-content使用需谨慎避免布局异常。
用 grid-template-columns 直接定义两列宽度
最直接的方式是给容器设 display: grid，再用 grid-template-columns 指定两列。常见组合有：
-
grid-template-columns: 1fr 1fr：等宽两列，自动均分可用空间 -
grid-template-columns: 200px 1fr：左侧固定 200px，右侧自适应剩余空间 -
grid-template-columns: minmax(200px, 1fr) 2fr：左列最小 200px、最多占 1 份，右列占 2 份
注意：fr 单位只在 Grid 容器中有效，不能和 px/% 混用时假设它们线性相加——实际分配按权重比例算。
避免子元素溢出导致布局错乱
Grid 默认不会为子项设置 min-width: 0，如果某列里放了长单词、URL 或未断行的英文段落，它会撑开整列，破坏两栏结构。
解决方法是在对应子元素上加：
立即学习“前端免费学习笔记（深入）”；
word-break: break-word; overflow-wrap: break-word; min-width: 0;
尤其当子项是 媒体查询中不要只改某列宽度，而是整套重写列定义： 常见错误是只写 如果需要三段式（侧边栏 + 主区 + 侧边栏）再退化为两栏，可考虑用 加 若两栏内容高度差异大，又希望底部对齐，别依赖 还有个易忽略点：flex 布局的内部容器时，min-width: 0 很关键——否则 Grid 会优先保证内容不被裁剪，而不是守柱列宽。
响应式下切回单列要重置
grid-template-columns
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
grid-template-columns: 1fr 却忘了移除原来的两列声明（比如内联样式或更高优先级规则），结果实际生效的仍是旧值。建议把默认两列写在常规样式里，响应式里覆盖为单列。grid-template-areas 配合命名区域，比单纯调列数更可控。
gap 和 justify-content 对齐方式会影响视觉“两栏感”gap: 20px 是让两栏之间有呼吸感的最简方式，但要注意它不包含在容器 width 内，可能意外触发水平滚动条（尤其父容器设了 width: 100% 且没设 box-sizing: border-box）。align-items: end ——它对整个网格生效，可能让标题也下沉。更稳妥的是给具体子项加 align-self: end。justify-content: center 会让两列整体居中，但若容器宽度不够，它可能把两列挤成一列显示（取决于内容宽度和 gap 总和）。真要居中，优先用外层容器的 margin: 0 auto 控制。
