CSS Grid问题：指定列放置的元素跳至下一行原因排查

你忽略了CSS Grid的自动流布局规则，以及grid-auto-flow: dense这个关键属性的作用。

问题根源 #

Grid默认的grid-auto-flow值是row，它会严格按照HTML元素的顺序依次填充网格：

1. .position占满3列，单独占据一行；
2. 接下来的.evolution会被放到下一行的第2列，.score放到第3列；
3. 此时当前行的第1列是空的，但Grid不会自动将后续的.name回填到这个空白位置，而是把.name放到再下一行的第1列——因为元素顺序是.score在前，.name在后，默认流只会按顺序往后排，不会回溯填充空白。

解决方案 #

给.container添加grid-auto-flow: dense属性，它会让Grid自动填充网格中之前的空白单元格，这样.name就能回到当前行的第1列，而不会跳行。

修改后的CSS代码：

body {
  background-color: darkslategrey;
  color: white;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 10px;
  text-align: center;
  grid-auto-flow: dense; /* 添加这一行 */
}

.name,
.evolution,
.score {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.position {
  grid-column: 1 / span 3;
}

.name {
  grid-column: 1;
}

.evolution {
  grid-column: 2;
}

.score {
  grid-column: 3;
}

效果说明 #

添加grid-auto-flow: dense后，Grid会扫描已有的空白单元格，将后续能匹配的元素填充进去：

• 每个.position占一行；
• 紧随其后的.evolution（列2）、.score（列3）填充下一行的右侧两列；
• 再后面的.name（列1）会被回填到当前行的左侧空白列，完美组成一行三列的结构；
• 动态新增的用户元素也会遵循这个规则自动布局，不需要额外调整。

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