如何在CSS Grid布局的顶部行插入元素，且不改动原有列表排序？

解决方案 #

给Grid容器添加grid-auto-flow: dense属性即可实现需求，无需调整原有DOM元素的排序。
该属性会触发Grid的紧凑布局模式，自动检索上行未被占用的空位，将尺寸匹配的后续元素填充到空位中，刚好适配你的场景。

修改后的完整样式代码如下：

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  /* 新增紧凑布局配置 */
  grid-auto-flow: dense;
}

.item1 {
  grid-column: 3 / 4;
  background-color: coral;
}

.item2 {
  grid-column: 5 / 5;
  background-color: red;
}

修改完成后，第三个元素（类为item2）会自动填充到第一行第5列的空余位置，和第一个item1元素处于同一行。

内容的提问来源于stack exchange，提问作者Kapral Miś