html - 更改定义网格内的 div 位置可保持原始布局

Question

问题是我有一个网格定义到一个侧边栏区域和一个主要区域。但是，当我用“主”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 那样的方向属性。但是只有网格自动列grid-auto-rows 负责处理额外生成的列或原始数据。

Answer 1

结果就像 Temani Afif 在按名称定义区域时所说的那样，这些为 html 的顺序创建了一个静态模板。
删除:

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

修复了这个