如何调整CSS Grid布局实现指定排列并解决顶部对齐问题？

问题描述 #

想要实现7个项目的Grid布局，期望排列如下：

1 3 6
2 4 7
  5

但当前代码实际呈现的布局是：

1
2 3 
  4
  5 6
    7

尝试给网格项添加self-align属性未生效，求修复方案。

解决方案 #

问题根源是只指定了网格项的列位置（grid-column），但未定义行位置（grid-row），Grid会默认按元素顺序自动分配行，导致布局错位。只需为每个网格项明确指定grid-row，就能强制它们占据目标行位置。

修改后的CSS代码如下：

.fruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.fruit {
  width: 100%;
}

/* 左侧列 */
.fruit:nth-child(1) { grid-column: 1; grid-row: 1; }
.fruit:nth-child(2) { grid-column: 1; grid-row: 2; }

/* 中间列 */
.fruit:nth-child(3) { grid-column: 2; grid-row: 1; }
.fruit:nth-child(4) { grid-column: 2; grid-row: 2; }
.fruit:nth-child(5) { grid-column: 2; grid-row: 3; }

/* 右侧列 */
.fruit:nth-child(6) { grid-column: 3; grid-row: 1; }
.fruit:nth-child(7) { grid-column: 3; grid-row: 2; }

说明 #

1. 移除了.fruit类的margin-bottom，因为Grid的gap属性已经可以控制网格项之间的间距，避免重复添加间距导致布局混乱。
2. 为每个网格项同时指定grid-column和grid-row，精准控制它们在网格中的位置，完全匹配期望的排列效果。

完整代码示例 #

<div class="fruit-grid">
  <div class="fruit">1</div>
  <div class="fruit">2</div>
  <div class="fruit">3</div>
  <div class="fruit">4</div>
  <div class="fruit">5</div>
  <div class="fruit">6</div>
  <div class="fruit">7</div>
</div>

.fruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.fruit {
  width: 100%;
}

.fruit:nth-child(1) { grid-column: 1; grid-row: 1; }
.fruit:nth-child(2) { grid-column: 1; grid-row: 2; }
.fruit:nth-child(3) { grid-column: 2; grid-row: 1; }
.fruit:nth-child(4) { grid-column: 2; grid-row: 2; }
.fruit:nth-child(5) { grid-column: 2; grid-row: 3; }
.fruit:nth-child(6) { grid-column: 3; grid-row: 1; }
.fruit:nth-child(7) { grid-column: 3; grid-row: 2; }

内容的提问来源于stack exchange，提问作者user22144856