利用 grid-auto-flow: dense 可实现紧凑自适应的图文混排布局，通过 CSS Grid 的自动填充与 minmax 配合实现响应式设计，使不同尺寸卡片紧密排列，提升空间利用率，适用于杂志或卡片式页面布局。
在现代网页设计中，图片与文字的混排布局非常常见。当页面需要适配不同设备时，响应式设计就显得尤为重要。利用 CSS Grid 的 grid-auto-flow: dense 特性，可以高效实现紧凑、自适应的图文混排效果，尤其适合卡片式或杂志风格的布局。
理解 grid-auto-flow: dense 的作用
CSS Grid 布局中的 grid-auto-flow 控制着自动放置的网格项如何被排列。默认值是 row，表示按行填充；设置为 column 则按列填充。而加上 dense 关键字后，Grid 会尝试填补前面留下的空白区域，从而实现更紧凑的布局。
这意味着：即使某些项目占据多个网格轨道（如2x2），后续较小的项目也能“回填”到上方或左侧的空隙中，避免出现明显留白。
立即学习“前端免费学习笔记（深入）”；
- dense 不改变项目顺序，但优化空间利用率
- 适合不规则尺寸内容（如不同大小的图文块）
- 需配合 grid-template-rows/cols 和 minmax() 实现响应式
构建响应式图文混排布局
以下是一个实际场景：一个包含图片和文字的文章区块，部分图文占一格，部分横跨两格，要求在不同屏幕宽度下自动调整并紧密排列。
HTML 结构示例：
图文A（2x2）文字B图片C横幅D（2宽）短文本E
CSS 样式实现：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 16px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: row dense; /* 启用密集填充 */
}
.item-small {
grid-column: span 1;
grid-row: span 1;
}
.item-wide {
grid-column: span 2;
grid-row: span 1;
}
.item-large {
grid-column: span 2;
grid-row: span 2;
}
说明：
- repeat(auto-fit, minmax(250px, 1fr)) 让每列最小250px，最大1fr，容器宽度不足时自动换行
- grid-auto-rows 确保行高自适应内容
- grid-auto-flow: row dense 允许小项目填补大项目留下的空隙
响应式优化建议
为了在移动端有更好的阅读体验，可进一步通过媒体查询调整跨度或字体大小。
@media (max-width: 600px) {
.item-large,
.item-wide {
grid-column: span 1; /* 所有项目变为单列 */
}
}
这样在小屏设备上避免横向溢出，同时保持内容顺序清晰。
另外，为图片添加响应式样式也很关键：
.item img {
width: 100%;
height: auto;
object-fit: cover;
}
基本上就这些。使用 grid-auto-flow: dense 能有效提升图文混排的空间利用率，结合 minmax 与 auto-fit 可轻松实现响应式布局。关键是合理定义项目的跨度，并在小屏下简化结构，确保可读性不受影响。
