如何实现CSS Grid grid item宽度超出父级网格容器框架

你原有写法失效的核心原因：给.grid-item设置position: absolute后，元素会直接脱离Grid布局流，默认不会对齐到原本分配的网格单元格；而且你的.grid父容器没有加position: relative，绝对定位的参考系根本不是Grid容器，自然达不到预期效果。
下面是三种可落地的实现方案，根据你的场景选就行：

方案1：Grid原生跨列+负边距（优先推荐，不破坏布局流） #

这是最贴合Grid设计逻辑的写法，元素不会脱离文档流，其他网格项的排布完全不受影响：

.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    /* 默认overflow:visible就支持内容溢出，不用额外改，除非你之前设过overflow:hidden */
}

/* 给需要加宽的单个项加专属类，比如.wide */
.grid-item.wide {
    /* 先锁定这个项原本占据的网格位置，比如你要让第三列的项加宽，就设为3/4 */
    grid-column: 3 / 4;
    width: 300px; /* 你需要的宽度，比原列宽多100px */
    /* 调整边距控制溢出方向：要居中溢出就左右各拉负50px，要向右溢出就只设margin-left为0，向左溢出就设margin-right为-100px */
    margin-left: -50px;
}

方案2：修正绝对定位逻辑（适合浮层类不占位的场景） #

如果你就是要这个加宽项不占网格位置，浮在其他内容上面，就把你原来的绝对定位写法补全：

.grid {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    position: relative; /* 必须加，让Grid成为绝对定位的参考容器 */
}

.grid-item.wide {
    position: absolute;
    width: 300px;
    /* 手动指定位置：比如第三列的项，左偏移是前两列总宽400px，往左拉50px实现居中，top值根据你要放的行数调整 */
    left: 350px;
    top: 0;
}

注意：这个方案下加宽项不会撑开父容器高度，还可能遮挡其他网格项，只适合不需要参与正常布局的特殊元素。

方案3：隐式跨列（适合不需要溢出父容器的场景） #

如果你不需要元素超出Grid父框架，只是想让单个项比预设列宽更宽，可以直接让它跨隐式列，Grid会自动分配空间：

.grid-item.wide {
    /* 从当前列开始，额外占1个隐式列的空间 */
    grid-column: 3 / span 2;
    width: 300px;
}

这个写法不会产生内容溢出，但会在原有三列的基础上生成新的隐式列，整体Grid的宽度会变大。

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