本文介绍一种基于 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 已接管布局；
- ✅ 修复图片拉伸问题：删除
.jpg)
的 width="100%" style="max-width:90%" 内联属性，改用 CSS height: auto 保障宽高比； - ✅ 简化响应式逻辑：Grid 的 auto-fit + minmax() 天然支持断点切换，无需在媒体查询中重写 flex-direction；
- ✅ 增强可维护性：使用 gap 替代 border-right/bottom 控制间距，语义清晰且易于调整；
- ✅ 提升可访问性与性能：移除无意义的 包裹，精简 DOM 结构。
? 小贴士：若需在中等屏幕（如平板）保留双栏，可将 minmax(400px, 1fr) 中的 400px 调整为 550px 或 600px，并配合 @media (max-width: 768px) 进行微调——Grid 的灵活性正体现在此处。
这种方案不仅解决了原始问题，更体现了现代 CSS 布局的演进方向：用更少代码、更高语义、更强适应性，达成精准可控的响应式效果。
