Html 在定义的网格内更改div的放置将保持原始布局

问题是我有一个定义为边栏区域和主区域的网格。 但当我用“main”div更改“sidebar”的顺序时，结构保持不变。 似乎html的结构并不重要

HTML：

<div class="gridcontainer">
  <div class="sideArea">
  </div>
  <div class="mainArea">
  </div>
</div>

然而，它的渲染和渲染都是按照原来的顺序进行的。 我想可能有一个方向属性，比如flex box。 但只有网格自动列

---

网格自动行，可用于处理额外生成的列或绘图。

结果与Temani Afif在按名称定义区域时所说的一样，这些行构成html顺序的静态模板。
删除：

grid-template-areas:"sidebar main main";

---

修复了此问题

因为您明确定义了每个元素的网格区域，所以您明确地将元素放置在网格中。HTML顺序并不重要

.gridcontainer{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas:"sidebar main main";
    grid-column-gap:50px;
}
.mainArea {
    border: 1px solid #000;
    grid-area: main;
    height:600px;
}
.sideArea {
    border: 1px solid red;
    grid-area: sidebar;
    position: relative;
    height:600px;
}

grid-template-areas:"sidebar main main";