轨道对齐方式

属性	作用方向	控制对象	常用值
justify-content	列轨道	网格轨道整体	start, end, center, space-between, space-around, space-evenly
align-content	行轨道	网格轨道整体	start, end, center, space-between, space-around, space-evenly

justify-content

控制列轨道在容器内水平分布

值	效果说明
start	网格贴左侧（默认）
end	网格贴右侧
center	网格居中
space-between	轨道间平均分配剩余空间（首尾无间距）
space-around	每个轨道周围都有相等间距（首尾留一半）
space-evenly	所有间距完全相等（包括首尾）

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 100px;
  justify-content: center;
  gap: 10px;
  border: 2px dashed #ccc;
  height: 200px;
}

align-content

控制行轨道在容器内垂直分布

值	效果说明
start	网格轨道贴顶部
end	网格轨道贴底部
center	网格整体垂直居中
space-between	上下均分剩余空间
space-around	上下各半间距
space-evenly	上下间距完全相等

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 100px);
  align-content: space-evenly;
  height: 400px;
  border: 2px dashed #ccc;
}

固定列多行布局

列数固定，item的高度固定，item数量不固定

html

<div class="grid-container">
  <div class="item" v-for="i in 13" :key="i">item {{ i }}</div>
</div>

css

.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;
}