HTML Grid布局无法交换文本区块位置问题求助

问题核心原因 #

你代码里的关键错误是Grid模板的命名区域与元素的grid-area值不匹配：

• 你在.product-text的grid-template中定义的是"grid-area5"这类命名区域，但给各个区块设置的grid-area是数字1、2、3…
• Grid系统无法将元素和模板里的区域对应，只能按HTML中元素的默认顺序渲染，所以位置不会变化。

Grid布局核心工作逻辑 #

Grid布局分三步实现自定义排列：

1. 给容器设置display: grid，将其转为Grid容器，直接子元素自动成为Grid项目。
2. 通过grid-template（或拆分的grid-template-rows/grid-template-columns）定义网格的行/列尺寸，同时可以给网格区域命名（即模板中带引号的字符串）。
3. 给每个Grid项目设置grid-area，值必须和容器中定义的区域名称完全一致，项目才会被放到对应网格位置。

修正后的代码 #

CSS部分

.product-text {
    display: grid;
    align-items: center;
    justify-content: center;
    /* 模板区域名称和元素grid-area统一 */
    grid-template:
    [row1-start] "expectations" 25% [row1-end]
    [row2-start] "use" 25% [row2-end]
    [row3-start] "problem" 25% [row3-end]
    [row4-start] "story" 25% [row4-end]
    / 80%;
}

.story {
    grid-area: story; /* 与模板区域名对应 */
    color: #B12293;
}
.problem {
    grid-area: problem;
    color: #2297B1;
}
.use {
    grid-area: use;
    color: #44CB5F;
}
.users {
    grid-area: users;
    color: #4452CB;
    display: none;
}
.expectations {
    grid-area: expectations; /* 对应模板第一行的区域 */
    color: #CB444C;
}
.future {
    grid-area: future;
    color: #593E3F;
    display: none;
}

HTML部分（修复空标签问题）

<section class="product-text">
    <article class="problem">
        <!-- 填充你的内容 -->
    </article>
    <article class="use">
        <!-- 填充你的内容 -->
    </article>
    <article class="users">
        <!-- 填充你的内容 -->
    </article>
    <article class="expectations">
        <!-- 填充你的内容 -->
    </article>
    <article class="future">
        <!-- 填充你的内容 -->
    </article>
    <article class="story">
        <!-- 填充你的内容 -->
    </article>
</section>

额外说明 #

修改后，expectations区块会直接显示在第一行，完全不受它在HTML中的DOM顺序影响——这正是Grid布局的核心优势之一：视觉排列与DOM顺序解耦，只要保证区域命名和grid-area值一致，就能自由调整元素位置。

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