CSS Grid 自动放置与隐式网格

CSS Grid自动放置：grid-auto-flow(row/column/dense)、grid-auto-rows/grid-auto-columns隐式轨道大小、auto-fill vs auto-fit区别、minmax(auto,1fr)响应式网格模板 · 难度：入门 · +10XP

CSS Grid 自动放置 —— grid-auto-flow 和隐式网格

当Grid子元素数量超过你定义的网格轨道时，多出来的元素去哪了？CSS Grid用隐式网格（Implicit Grid）自动处理。

grid-auto-flow —— 控制自动排列方向

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;     /* 默认：按行填充 */
  /* or */
  grid-auto-flow: column;  /* 按列填充 */
  /* or */
  grid-auto-flow: dense;   /* 紧密填充：尽量不留空洞 */

grid-auto-rows / grid-auto-columns

.grid {
  grid-auto-rows: 200px;         /* 隐式行的固定高度 */
  grid-auto-rows: minmax(100px, auto);  /* 最小100px，内容多自动扩展 */
}

动手练习

1. 基础练习：做一个3列Grid，只定义列轨道，让行自动生成。
2. 进阶应用：用grid-auto-flow:dense做一个"Pinterest式"瀑布流，尽量避免空洞。
3. 项目实战：在商品列表页用grid-auto-rows:minmax让行高自动适配内容。