如何用 CSS Grid 实现图文并排布局及其响应式断点切换

本文详解如何使用现代 css grid 替代 flexbox，构建一个桌面端左右并排（图左文右）、移动端自动堆叠为上下结构的响应式图文模块，并解决图片溢出、高度不一致及断点失效等常见问题。

在构建响应式图文布局时，许多开发者习惯首选 Flexbox，但当面临「固定最小宽度触发换行」+「等高容器」+「自适应缩放」三重需求时，Flexbox 往往需要大量 hack（如 flex-basis、min-width 配合媒体查询），且易因子元素尺寸失控导致意外换行或溢出——正如原问题中图片无约束撑满容器、.container 过早回流等问题。

此时，CSS Grid 是更简洁、更可靠的解决方案。核心在于使用 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)))：

• minmax(400px, 1fr)：每个网格列最小宽度为 400px（适配中大屏），最大可伸展为可用空间的等分份额（1fr）；
• auto-fit：在容器宽度不足时，自动将所有列压缩至单列（即堆叠），无需手动写媒体查询控制 flex-direction；
• grid-auto-rows: 1fr：确保左右两栏（图与文）在桌面端自动等高，视觉更均衡。

以下是优化后的完整代码（已移除冗余 Flexbox 类、修复图片拉伸、精简媒体查询）：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1rem; /* 推荐添加间距，替代 border-right/bottom */
  border: 1px solid #000;
  margin: 5%;
  width: 90%;
  max-width: 1200px; /* 防止超宽屏下内容过散 */
}

.div1, .div2 {
  padding: 1rem;
  background-color: #e3e3e3;
}

.div1 img {
  width: 100%;
  height: auto; /* 关键！禁止 height:100% 导致失真 */
  display: block;
  border-radius: 4px;
}

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;
}

/* 移动端仅需微调间距和字体，Grid 自动完成堆叠 */
@media (max-width: 500px) {
  .container {
    margin: 0 1rem;
    width: auto;
  }
  .div1, .div2 {
    padding: 0.75rem;
  }
  h { font-size: 1.5rem; }
}

  
    @@##@@
  
  
    Lorem ipsum
    
Lorem ipsum dolor sit amet...（正文略）
  

✅ 关键改进说明：

• ✅ 图片可控性：移除 width="100%" height="100%" 内联属性，改用 CSS width: 100%; height: auto;，避免拉伸变形；
• ✅ 语义清晰：删除无意义的 包裹层，减少 DOM 节点；
• ✅ 响应式更优雅：Grid 的 auto-fit + minmax() 天然支持断点，无需在媒体查询中重复修改 flex-direction；
• ✅ 视觉增强：用 gap 替代边框分隔，更符合现代设计规范；添加 max-width 限制超宽屏体验；
• ⚠️ 注意事项：若需兼容 IE11，请回退至 Flexbox + 精确媒体查询（如 @media (max-width: 767px)），但强烈建议优先支持现代浏览器以享受 Grid 的简洁性与健壮性。

总结：面对「最小宽度触发布局切换」类需求，CSS Grid 的 auto-fit 与 minmax() 组合是比 Flexbox 更直观、更少副作用的首选方案——它让响应式从“条件判断”回归“尺寸描述”，真正实现「写一次，自适应」。