双栏布局用 display: grid 最稳，推荐 grid-template-columns 控制列宽，gap 替代 margin，移动端需在媒体查询中重置为 1fr，配合 aspect-ratio 和 object-fit 统一图片显示，注意兼容性与高度控制。
双栏布局用 display: grid 最稳，别碰 float 或老旧的 inline-block 适配方案——它们在响应式断点、垂直对齐、间隙控制上会反复出问题。
用 grid-template-columns 控制两栏等宽与不等宽
等宽双栏直接写 grid-template-columns: 1fr 1fr；需要主栏宽、侧栏窄（比如 3:1），就用 grid-template-columns: 3fr 1fr。注意别写成 3fr 1fr 中间加空格以外的字符，否则整个声明失效。
- 如果卡片高度不一致，
grid-auto-rows设为minmax(200px, auto)可防内容塌陷 - 用
gap: 1rem替代margin控制卡片间距，避免外边距合并问题 - IE11 不支持
fr单位，真要兼容就得切回display: flex+flex-basis
@media 断点下强制单列必须重置 grid-template-columns
很多人只加 flex-direction: column，但 grid 布局里这没用。移动端必须显式覆盖：在 @media (max-width: 768px) 内重写 grid-template-columns: 1fr，否则双栏会强行挤压、文字换行错乱。
- 别依赖
minmax()自动收缩——它只管单个轨道，不管整体列数 - 若侧栏是广告或导航，可加
grid-column: span 1让它在小屏下独占一行 - 用
grid-template-areas配合媒体查询能更灵活地重排区块顺序
卡片内 aspect-ratio 与 object-fit 配合防图变形
双栏卡片常因图片尺寸不一导致高度参差。给图片容器设 aspect-ratio: 4/3，再加 object-fit: cover，就能统一视觉节奏，且不破坏语义结构。
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari 需加
-webkit-aspect-ratio前缀（iOS 15.4+ 才原生支持） - 别用
height: 100%强撑——父容器若没明确高度，它会塌成 0 - 文字区域用
min-height: 6em防止短内容导致卡片高度跳变
真正麻烦的是当卡片带悬停动效或懒加载图片时，grid 的自动行高计算会滞后。这时候得手动触发 grid-auto-rows 重算，或者改用 grid-template-rows: auto 配合 align-content: start 锁定顶部对齐——这点容易被忽略，但直接影响滚动体验。
