如何在响应式布局中让CSS Grid的G区块置于所有区块下方？

以下是针对你需求修改后的完整代码，附带详细注释说明，帮你理清Grid响应式的核心逻辑：

修改后的完整代码 #

CSS（带注释） #

* {
    box-sizing: border-box; 
}

body {
    margin: 0; 
}

.container {
    border: 3px solid #9a9a9a;
    border-radius: 0.5rem;
    padding: 0.5rem;
    gap: 7px; /* 合并行列间距写法，更简洁 */
    display: grid;
    /* 桌面端4列布局 */
    grid-template-columns: 1fr 1fr 1.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "A A A A"
        "B C F G"
        "D E F G";
    height: 100vh;
}

.container > div {
    background-color: #d9d9d9;
    display: grid;
    place-items: center;
}

/* 绑定各区块到对应的网格区域 */
.A { grid-area: A; }
.B { grid-area: B; }
.C { grid-area: C; }
.D { grid-area: D; }
.E { grid-area: E; }
.F { grid-area: F; }
.G { grid-area: G; }

/* 移动端响应式断点：宽度≤600px时生效 */
@media screen and (max-width: 600px) {
    .container {
        /* 移动端改为3列等宽布局 */
        grid-template-columns: repeat(3, 1fr);
        /* 调整行数：适配新的区块排列，共4行 */
        grid-template-rows: 1fr 1fr 1fr 1fr;
        /* 重新定义网格区域，把G放到最后一行全宽位置 */
        grid-template-areas:
            "A A A"    /* A占满第一行所有列 */
            "B C F"    /* B、C、F各占一列 */
            "D E ."    /* D、E占前两列，第三列留空（.代表空单元格） */
            "G G G";   /* G占满最后一行所有列，位于所有区块下方 */
        height: auto; /* 取消固定100vh高度，让容器随内容自适应 */
    }

    .container > div {
        border-radius: 1rem;
    }
}

HTML（无需修改） #

<div class="container">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="C">C</div>
    <div class="D">D</div>
    <div class="E">E</div>
    <div class="F">F</div>
    <div class="G">G</div>
</div>

关键调整说明 #

1. 修正网格区域配置：原媒体查询中grid-template-areas完全沿用桌面端布局，没有移动G的位置。新配置将G单独放在最后一行，用G G G让它占满整行宽度，确保位于所有区块下方。
2. 匹配列数与区域定义：原代码中grid-template-columns: repeat(3, 1fr)但区域写了4列（A A A A），会导致布局报错，新配置保证区域列数与定义的列数一致。
3. 优化移动端高度：取消固定100vh高度，改为auto，避免移动端内容溢出或容器高度不合理。
4. 空单元格处理：第三行用.表示空单元格，对应F已在第二行占据位置，保证布局整齐。

Grid响应式核心思路 #

• 断点触发重写：通过媒体查询在指定宽度下，重写Grid的列、行、区域配置，实现布局重排。
• 区域可视化排列：grid-template-areas可以直观地用字符串描述区块位置，无需修改HTML结构，这是Grid做响应式的核心优势。
• 自适应优先级：移动端优先保证布局紧凑、内容可见，避免固定尺寸限制。

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