在已定义网格内更改div位置可保持原始布局

Question

问题是我有一个定义为侧边栏区域和主区域的网格。但是，当我用“ main” div更改“侧边栏”的顺序时，结构保持不变。好像html的结构没关系。

HTML：

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

格式化的HTML：

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

CSS：

.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;
}

但其渲染和显示的顺序相同。以为也许有像flex-box一样的direction属性。但是只有网格自动列网格自动行，负责处理额外生成的列或原始数据。

Answer 1

结果就像Temani Afif所述，当通过名称定义区域时，这些区域将按照html的顺序生成静态模板。删除：

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

已解决此问题