如何实现未知数量项时，奇数场景下第二列垂直对齐的两列Grid布局

你的问题出在grid-auto-rows: 1fr这个属性上——它会强制网格的每一行高度均等分配容器空间，导致第二列的项目被拉伸分散。要实现奇数项时第二列项目垂直对齐顶部的效果，只需调整网格的行高控制和对齐方式：

修改后的CSS代码 #

.container {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start; /* 让网格行顶部对齐，不拉伸填充容器 */
  /* 移除grid-auto-rows: 1fr，行高度由内容自动决定 */
}

.item {
  border: 1px dashed blue;
  box-sizing: border-box;
  height: 50px;
}

效果说明 #

• 当项目数量为偶数时，两列项目数量相等，保持整齐的两列布局；
• 当项目数量为奇数时，第一列会比第二列多一个项目，第二列的所有项目会垂直对齐到顶部，与第一列的前N个项目一一对应，最后一个单独的项目会在第一列的最下方。

如果需要给项目之间添加间距，可以在.container中添加gap: 10px;（数值按需调整），不会影响对齐效果。

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