如何在外部Grid组件末尾插入div使其成为最后一个网格项？

由于无法修改外部组件my-grid的DOM结构，我们可以通过调整共同父元素的布局，让new-item融入到原网格流中，核心思路如下：

核心方法：使用display: contents让子元素“穿透”容器 #

给my-grid设置display: contents，这个属性会让my-grid本身从布局树中消失，其直接子元素（也就是那些.item）会被当作共同父元素的直接子元素处理。同时把共同父元素设置为Grid容器，复用原my-grid的列规则，这样new-item就能和所有.item遵循同一套网格排列逻辑。

完整代码示例 #

CSS 代码

/* 共同父容器设置为Grid，复用原网格的列规则 */
.grid-parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

/* 让外部组件的容器“穿透”，子元素直接参与父容器的Grid布局 */
.my-grid {
  display: contents;
}

.item {
  background-color: #ddd;
  height: 300px;
}

.new-item {
  background-color: #eee;
  height: 300px; /* 和其他网格项保持一致高度 */
}

HTML 代码

<div class="grid-parent">
  <div class="my-grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="new-item">hello!</div>
</div>

兼容性替代方案（针对不支持display: contents的旧浏览器） #

如果需要兼容IE等旧环境，可以放弃display: contents，改为：

• 共同父容器保持Grid布局，列规则和my-grid一致
• 给my-grid设置grid-column: 1 / -1，让它占据父容器的所有列
• my-grid内部的Grid布局保持不变

这样new-item会作为父Grid的最后一个子项，自动填充到网格的末尾位置，代码示例：

.grid-parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

.my-grid {
  grid-column: 1 / -1;
  /* 保留原Grid布局并继承父容器规则 */
  display: grid;
  grid-template-columns: inherit;
  grid-gap: inherit;
}

/* 其他样式不变 */

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