使用 grid-auto-flow: dense 与媒体查询可实现响应式图文混排。通过设置网格容器的列数、行高及自动填充模式，结合不同屏幕宽度调整布局结构，使大图占多格、小元素自动补位，提升空间利用率；配合 minmax() 与 auto-fit 进一步增强弹性，确保在手机、平板和桌面均有良好显示效果，同时需注意 DOM 顺序与可访问性协调。
在现代网页设计中，图片与文字的混合布局很常见，比如新闻列表、产品展示或博客文章。要让这种布局在不同设备上都能良好显示，响应式设计是关键。使用 CSS Grid 的 grid-auto-flow: dense 搭配媒体查询（media query），可以实现灵活、自适应的图文混排效果。
理解 grid-auto-flow: dense 的作用
Grid 布局中的 grid-auto-flow: dense 允许系统自动填充网格中的空白区域。当某些网格项占据多个轨道时，原本可能留下空洞，而 dense 模式会尝试把后续较小的项目“塞”进这些空隙里，提高空间利用率。
这在图文混排中特别有用：比如大图占据两格，小图或文字块可以自动补位，避免出现明显留白。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
<p>.item.wide {
grid-column: span 2;
}</p><p>.item.tall {
grid-row: span 2;
}</p>结合 media query 实现响应式断点
为了让布局在手机、平板和桌面都有良好表现，需要使用媒体查询动态调整列数和项目尺寸。
常见做法是在小屏上减少列数，甚至改为单列垂直排列；在大屏恢复多列密排。
例如：
/* 小屏幕 */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-auto-rows: 80px;
}
.item.wide, .item.tall {
grid-column: auto;
grid-row: auto;
}
}
<p>/<em> 平板 </em>/
@media (min-width: 601px) and (max-width: 900px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}</p><p>/<em> 桌面 </em>/
@media (min-width: 901px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}</p>图文混合布局的实际结构建议
每个网格项应包含图片和文字，结构统一便于控制样式。
HTML 示例：
<div class="container">
<div class="item">
<img src="img1.jpg" alt="">
<p>描述文字</p>
</div>
<div class="item wide">
<img src="img2.jpg" alt="">
<p>宽图内容</p>
</div>
<div class="item tall">
<img src="img3.jpg" alt="">
<p>高图说明</p>
</div>
</div>
CSS 中可为图片设置 width: 100% 和 height: auto 保证等比缩放，文字容器用 flex 垂直居中或自然流式排布。
注意事项与优化建议
使用 dense 模式时要注意 DOM 顺序与视觉顺序可能不一致，影响可访问性或屏幕阅读器体验。建议：
- 确保重要内容在 HTML 中靠前
- 避免对表单或操作类元素使用 dense 排列
- 测试不同断点下的视觉逻辑是否连贯
- 配合 minmax() 和 auto-fit 进一步提升弹性
比如：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
这样能更智能地根据容器宽度调整列数。
基本上就这些。合理利用 grid-auto-flow: dense 和 media query，可以让图文布局既紧凑又响应式，适配各种设备场景。关键是结构清晰、断点合理、内容优先级明确。不复杂但容易忽略细节。
