如何在动态Grid网格布局中让元素固定在第n个指定单元格位置

实现方案 #

这个需求可以实现，仅通过修改CSS即可完成，无需改动现有HTML结构。

核心思路 #

利用CSS伪元素生成匿名占位元素，让该占位元素自动占据前6个网格单元格，后续的.target元素自然就会排列到第7个单元格的位置，完全适配动态变化的网格列数。

完整代码 #

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: 100px;
  width: 100%;
}

/* 新增占位伪元素，占据前6个单元格 */
.grid::before {
  content: '';
  grid-column: span 6;
}

.target {
  background-color: red;
}

原理解释 #

• grid-column: span 6 表示该伪元素会连续占据6个网格单元格的位置，不受每行总列数限制：如果一行放不下指定数量的单元格，会自动换行继续占用，最终刚好填满前6个位置
• 伪元素是.grid的子元素，默认排列顺序在所有真实子元素之前，不会影响.target的正常排序
• 不需要新增真实DOM节点，完全符合不能修改HTML结构的约束

适配其他位置 #

如果需要固定到第N个单元格，只需要将span后的数值修改为N-1即可，适配性极强。

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