首先设置Grid容器并定义列结构，接着通过grid-auto-rows实现自动换行，然后启用grid-auto-flow: dense实现紧凑排列，最后配合span使大元素跨越多行/列，小元素自动填充空隙，提升布局效率。
在CSS Grid布局中，实现元素自动换行并使用 grid-auto-flow: dense 布局，可以让网格容器更高效地填充空白区域。这种方式特别适合不规则尺寸的子元素排列，避免出现明显空隙。下面介绍具体操作流程。
1. 设置Grid容器和基本网格结构
首先要定义一个Grid容器，并设置固定的列数或使用灵活的自动列生成方式。
示例：
.container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 创建3列，每列100px */
gap: 10px;
}
也可以使用 fr 单位实现响应式列宽：
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
2. 启用自动换行（自动行生成）
当项目数量超过单行容量时，需要让元素自动换行到下一行。这通过设置 grid-auto-rows 和自动行创建来实现。
关键属性：- grid-auto-rows：定义自动生成的行的高度
- 浏览器会根据内容自动添加新行
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px; /* 自动生成的每一行高100px */
gap: 10px;
}
3. 使用 grid-auto-flow: dense 实现紧凑排列
默认情况下，Grid按顺序逐行排列元素，可能留下空位。启用 dense 模式后，系统会尝试回填前面可用的空白单元格，使布局更紧凑。
使用方法：
.container {
grid-auto-flow: row dense;
}
或仅写：
grid-auto-flow: dense;
表示允许“密集填充”，即小项目可填补前面的大项目留下的空隙。
4. 配合跨度（span）实现不规则项目布局
要让某些项目占据多行或多列，从而体现 dense 的优势，需使用 grid-column 或 grid-row。
示例：
.item-large {
grid-column: span 2;
grid-row: span 2;
}
此时，后续的小项目如果能放入前面被大项目跳过的空格中，dense 会自动将其填入，提升空间利用率。
基本上就这些。合理使用 auto-flow 与 dense 模式，能显著提升网格布局的灵活性和视觉整洁度，尤其适用于仪表盘、图库等复杂排版场景。注意测试不同屏幕下的表现，避免因密集排列导致内容重叠。
