使用CSS Grid反转元素时出现额外网格行的问题排查

问题原因 #

你仅给网格项指定了grid-column，但未明确设置grid-row。尽管定义了grid-template-rows: 1fr，网格的自动放置算法可能因DOM元素顺序，错误地将部分元素分配到新行（实际测试中该情况通常不会出现，但明确指定行可彻底规避这类异常）。

解决方案1：强制所有项在同一行 #

给每个网格项添加grid-row: 1，强制它们都占据第一行：

.grid-container {
  border: 10px solid red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
}

.item-1 {
  grid-column: 3;
  grid-row: 1;
  border: 1px solid blue;
}

.item-2 {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid cyan;
}

.item-3 {
  grid-column: 1;
  grid-row: 1;
  border: 1px solid green;
}

解决方案2：更简洁的反转方式 #

无需逐个指定列，直接使用grid-auto-flow: column-reverse让网格容器自动反转列的排列顺序，DOM顺序不变的同时，页面显示顺序反转，且天然保持一行三列布局：

.grid-container {
  border: 10px solid red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column-reverse;
}

.item-1 {
  border: 1px solid blue;
}

.item-2 {
  border: 1px solid cyan;
}

.item-3 {
  border: 1px solid green;
}

效果说明 #

两种方案都能实现DOM顺序为One→Two→Three，页面显示为Three→Two→One的反转效果，且保持一行三列的布局。

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