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

本文介绍一种比 flexbox 更简洁可靠的方案：利用 css grid 的 `auto-fit` 与 `minmax()` 实现图片与文本区域在桌面端左右并排、移动端自动堆叠的响应式布局，同时解决图片溢出、高度不一致及断点失效等常见问题。

在构建现代响应式页面时，「图片 + 文本卡片」是高频需求。传统 Flexbox 方案（如原代码中使用的 inline-flex + flex-direction: row/column）常因子元素尺寸失控（如图片未约束宽高）、父容器缺乏弹性约束，导致断点失效、布局错乱或高度不对齐——尤其当文本长度差异大时，左右区块高度无法自动拉齐。

推荐解法：css Grid 布局

相比 Flexbox 的一维流式控制，Grid 天然支持二维布局与智能轨道分配。核心在于以下两行声明：

.container {   display: grid;   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));   grid-auto-rows: 1fr; /* 确保两列等高 */   border: 1px solid black;   margin: 5%;   width: 90%; }

• repeat(auto-fit, minmax(400px, 1fr)) 含义：

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

  • 每个网格项最小宽度为 400px（即桌面端双栏临界值）；
  • 最大可伸展至 1fr（均分剩余空间）；
  • 当视口宽度不足以容纳两个 400px 项时（如 ≤800px），Grid 自动将第二项换行，形成单列堆叠——无需媒体查询即可实现响应式断点。

• grid-auto-rows: 1fr 确保无论内容多寡，.div1（图片）与 .div2（文本）在桌面端始终等高，视觉更统一。

✅ 关键优化点（修正原代码问题）： 移除 .div1 和 .div2 上冗余的 display: flex（Grid 容器已接管布局逻辑）； 删除 .div2 中冲突的 max-width: 50%（Grid 已通过 minmax() 控制）； 图片需添加 width: 100%; height: auto; Object-fit: cover; 防止拉伸变形（原代码中 width=”100%” height=”100%” 是内联属性，不可靠且易破坏响应式）； 媒体查询可精简：若 Grid 已实现自动换行，@media (max-width: 500px) 中仅需微调间距与边框（如移除右侧边框、增加底部边框），无需重写 flex-direction。

完整优化后代码示例：

   
     @@##@@   
   
     
Lorem ipsum
     
Lorem ipsum dolor sit amet...（长文本）
   
 

.container {   display: grid;   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));   grid-auto-rows: 1fr;   gap: 1rem; /* 推荐用 gap 替代 border 分隔 */   border: 1px solid #ccc;   margin: 5%;   width: 90%;   max-width: 1200px; /* 防止超大屏下过宽 */ }  .div1, .div2 {   padding: 1rem;   background-color: #e3e3e3; }  .div2 {   background-color: #fff; }  h2 {   color: #90bd49;   font-size: 1.875rem;   margin: 0 0 0.75rem 0; }  p {   color: #333;   font-size: 1rem;   line-height: 1.6; }  /* 移动端微调（可选） */ @media (max-width: 500px) {   .container {     margin: 0;     width: 100%;     gap: 0;   }   .div1, .div2 {     padding: 1rem;   }   .div1 img {     width: 100%;   } }

总结：
CSS Grid 的 auto-fit + minmax() 组合是解决“等宽自适应多栏 → 单栏堆叠”场景的黄金方案。它语义清晰、代码精简、断点精准，且天然支持等高对齐。相比 Flexbox 手动控制 flex-direction 与 max-width，Grid 更少依赖媒体查询、更少样式冲突、更易维护。对于图文并排类组件，优先选用 Grid 布局，让响应式真正“自动发生”。