grid-template-columns: 1fr 1fr 是实现图文双列等宽布局最简洁高效的方式，自动均分容器宽度；配合 gap 控制间距、grid-column 自由定位内容、媒体查询切换单列，并通过 align-items: start 和内边距优化对齐与响应。
用 grid-template-columns: 1fr 1fr 是实现图文双列等宽布局最简洁高效的方式，无需计算像素或百分比，自动均分容器空间。
基础双列结构：1fr 1fr 直接等分
只需在容器上设置 display: grid 和两列等比定义，浏览器会自动将可用宽度平分给左右两列：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px; /* 列间间距 */
}此时左列放图、右列放文（或反之），天然对齐、响应自然。注意：1fr 表示“剩余空间的 1 份”，两个 1fr 就是各占一半。
图文内容按需分配，不强制固定顺序
Grid 允许内容自由放置，不必按 HTML 顺序排列。比如希望图片在右、文字在左，可配合 grid-column 控制：
- 图片元素加
grid-column: 2;→ 显示在第二列 - 文字元素加
grid-column: 1;→ 显示在第一列
这样语义结构和视觉顺序可以分离，利于 SEO 和可访问性。
适配小屏幕：用 media query 切换为单列
双列在手机上拥挤，建议在小屏下退回单列流式布局：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}这样既保持桌面端的并排效果，又保障移动端阅读体验，无需额外 JS 或复杂断点。
进阶微调：图文高度对齐与内边距控制
若图片和文字块高度差异大，可加 align-items: start 防止默认拉伸；文字区域建议用 padding 而非 margin 控制内部留白，避免影响 Grid 的轨道计算：
- 统一顶部对齐：
align-items: start; - 图文内边距独立设置，不依赖外边距撑开网格
- 图片用
width: 100%; height: auto;保证响应缩放
基本上就这些 —— 1fr 1fr 是双列的起点，灵活、轻量、易维护。
