CSS Grid 实现网格项顶部对齐与按指定列顺序排列

详细介绍如何借助 `order` 属性搭配显式列划分，精确控制 7 个网格项在三列布局中实现垂直顶部对齐与逻辑位置调整，避免默认文档流带来的错位问题。

本文要探讨的是 CSS Grid 布局中一个常见却容易踩坑的需求：让网格项按指定列的顺序排列，同时保持顶部对齐。以 7 个项目的三列布局为例，假设期望的视觉顺序为：第一列依次摆放 1、3、6；第二列依次摆放 2、4、7；第三列单独放置 5——即“按列优先、顶部对齐”的结构。如果直接使用 grid-column 定位并设置 align-items: start，会发现 Grid 的自动行放置（auto-placement）会按 DOM 中的顺序逐行填充，grid-column 仅控制列范围，无法决定行位置，结果往往是项目被拉开、错位，无法达到预期效果。

解决思路是什么？放弃纯 grid-column 定位，改用 order 属性重构视觉流。将逻辑上属于同一“视觉列”的网格项赋予相同的 order 值，然后通过 grid-template-columns 划分三列。Grid 会按照 order 的升序优先填满第一列，再填第二列，最后填第三列——各列的顶部自然而然就对齐了。

来看一个具体的实现代码：

.fruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等宽列 */
  gap: 10px;
  /* 不需要 align-items: start —— 默认即为 stretch，但因内容高度一致且无跨行，顶部自然对齐 */
}

.fruit {
  width: 100%;
  margin-bottom: 10px; /* 注意：此 margin 可能影响行高，建议改用 gap 或 padding */
}

/* 视觉左列：1、3、6 → order: 1 */
.fruit:nth-child(1),
.fruit:nth-child(3),
.fruit:nth-child(6) {
  order: 1;
}

/* 视觉中列：2、4、7 → order: 2 */
.fruit:nth-child(2),
.fruit:nth-child(4),
.fruit:nth-child(7) {
  order: 2;
}

/* 视觉右列：5 → order: 3 */
.fruit:nth-child(5) {
  order: 3;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7

关键要点说明：

• order 值决定了 Grid 自动放置的优先级，数值越小越靠前；相同 order 的元素按 DOM 源序排列。
• 在本例中，order: 1 的三个项目（1、3、6）整体被放置到第一列，order: 2 的三个项目（2、4、7）依次填入第二列，order: 3 的项目（5）独占第三列——完美匹配目标布局：1 3 6 / 2 4 7 / 5。
• 要避免混用 grid-column 与 order：两者的逻辑会冲突，order 主导自动放置，而显式的 grid-column 在 order 作用下可能失效。
• 如果希望通过 margin-bottom 保持内部间距，确保父容器的 gap 足够容纳，或者改用 padding 替代，防止意外撑高行距。

这套方案简洁、语义清晰，无需编写任何 JavaScript，兼容所有现代浏览器。对于非对称列布局的顶部对齐问题，它堪称标准化、最省心的实践方式。