网格布局默认行为

自动放置

在没有明确指定位置的情况下，CSS Grid 会自动为网格项目分配位置。这是 Grid 布局的一个重要特性，称为自动放置。在这种情况下，网格项目会根据网格的定义和空间自动流动到下一个可用位置。

该特性由grid-auto-flow控制

row

row（默认值）：项目按行排列，先从左到右填满一行，再移动到下一行。

1 2 3
4 5 6

column

column：项目按列排列，先从上到下填满一列，再移动到下一列。

1 4 7
2 5 8
3 6 9

实践

有些网站的导航项会使用此属性

dense

会让浏览器尝试回填空位，避免出现空格。dense通常跟前两个组合使用：

值	含义
row dense	按行填充，同时回填空位
column dense	按列填充，同时回填空位

某些项目占多行或多列，可能导致布局出现“洞”。dense 会试图把小项回填回去。

隐式行

• 如果没有指定grid-template-rows，则浏览器会自动生成新的 implicit rows（隐式行）。

• 当已有定义的行（grid-template-rows）不够用时，浏览器会自动生成新的 implicit rows（隐式行）。

隐式行的高度由grid-auto-rows决定，grid-auto-rows的默认值是auto，即行的高度会由内容高度决定

grid-auto-rows: auto;

固定列多行

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 固定4列 */
  justify-content:space-between;
  gap: 12px; /* 行列间距 */
}

.item {
  height: 120px;          /* 每行固定高度 */
  background: #4f6ef7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

你也可以指定自动创建的行高：

grid-auto-rows: 100px;

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 100px;  /* 自动创建的行高 */
  gap: 10px;
}