如何使用 CSS Grid 实现图片与文本并排布局的响应式切换

10次阅读

本文介绍一种基于 css grid 的现代解决方案，替代传统 flexbox 布局，实现桌面端左右并排（图片 + 文本）、移动端自动堆叠的响应式设计，并解决图片溢出、断点失效及高度不一致等常见问题。

在构建响应式图文模块时，许多开发者会本能选择 flexbox，但当遇到「图片无约束拉伸」「断点下未按预期换行」「两列高度不对齐」等问题时，往往陷入反复调试的困境。此时，CSS Grid 提供了更简洁、语义更清晰的解决方案。

核心思路是：用 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))) 替代手动控制 flex 换行。该声明表示：

每个子元素最小宽度为 400px（即桌面端双栏所需的临界值）；
当容器宽度 ≥ 800px（2 × 400px），自动创建两列；
当宽度
auto-fit 确保空余空间被均分，避免留白；1fr 保证列宽弹性扩展。

同时，添加 grid-auto-rows: 1fr 可使两列在网格中保持等高，彻底解决图文高度不一致导致的视觉割裂问题。

以下是优化后的完整代码（已移除冗余 flex 声明，精简媒体查询）：

立即学习 “ 前端免费学习笔记（深入）”；

.container {display: grid;   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)));   grid-auto-rows: 1fr;   gap: 1rem; /* 推荐替代 border 实现间距，更可控 */   border: 1px solid #000;   margin: 5%;   width: 90%;   max-width: 1200px; /* 防止超大屏下内容过宽 */ }  .div1, .div2 {padding: 1rem;}  .div1 img {width: 100%;   height: auto; /* 关键！禁止 height="100%" 导致拉伸变形 */   display: block;}  .div2 {background-color: #e3e3e3;}  h {color: #90bd49;   font-size: 1.875rem; /* 30px → 更推荐 rem 单位 */   margin: 0 0 0.75rem 0;}  p {color: #333;   font-size: 1rem; /* 16px */   line-height: 1.6;   margin: 0;}  /* 移动端断点：≤500px 时强制单列（Grid 自动处理，无需额外 flex-direction）*/ @media (max-width: 500px) {.container {     margin: 0;     width: 100%;     gap: 0;}   .div1,   .div2 {padding: 0.75rem;} }

        @@##@@   
        Lorem ipsum     Lorem ipsum dolor sit amet, consectetuer adipiscing elit……

✅ 关键改进说明：

✅ 移除所有 display: flex 冗余声明：.div1 和 .div2 不再需要 display: flex，Grid 已接管布局；
✅ 修复图片拉伸问题：删除的 width=”100%” style=”max-width:90%” 内联属性，改用 CSS height: auto 保障宽高比；
✅ 简化响应式逻辑：Grid 的 auto-fit + minmax() 天然支持断点切换，无需在媒体查询中重写 flex-direction；
✅ 增强可维护性：使用 gap 替代 border-right/bottom 控制间距，语义清晰且易于调整；
✅ 提升可访问性与性能：移除无意义的包裹，精简 DOM 结构。