如何用CSS Grid实现元素重叠？遇自动新增列问题求助

问题原因 #

1. CSS语法错误：你的style.scss中width: 95%;后面多了无效的your text内容，导致浏览器无法正确解析后续的网格配置属性，触发默认网格行为生成额外列。
2. 固定宽度溢出：给网格项目设置固定width:300px并搭配margin:0 auto，当网格容器宽度小于300px时，项目会超出网格列的定义范围，网格会自动生成额外轨道容纳溢出内容。

修复后的代码 #

index.html（无需修改）

<div class="grid-overlap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

style.scss

.grid-overlap {
    max-width: 40rem;
    width: 95%;
    margin: 2rem auto;
    gap: 1rem;
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: 1fr;

    .box {
        height: 300px;
        max-width: 300px;
        width: 100%;
        place-self: center;
        text-align: center;
        font-size: 3rem;
    }

    .box:nth-child(1) {
        grid-row: 1 / 3;
        background-color: dodgerblue;
    }
    .box:nth-child(2) {
        background-color: red;
        grid-row: 2 / 4;
        z-index: 100;
    }
    .box:nth-child(3) {
        grid-row: 3 / 5;
        background-color: tomato;
    }
}

修复说明 #

• 移除CSS中的无效文本your text，确保网格布局属性被浏览器正确解析。
• 将固定width:300px改为max-width:300px + width:100%，既保留最大宽度限制，又能在容器较小时自适应网格列宽，避免溢出触发额外列。
• 使用网格原生的place-self:center替代margin:0 auto，适配网格布局逻辑，避免margin带来的尺寸计算异常。

调整后，box2会在垂直方向上覆盖box1和box3各一半区域，同时不会生成额外列。

内容的提问来源于stack exchange，提问作者Minux-Dev