本文介绍一种比 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 布局，让响应式真正“自动发生”。
.jpg)
