更改已定义网格内的 div 位置可保留原始布局答案

【问题标题】：Changing div placement inside a defined grid keeps the original layout更改已定义网格内的 div 位置可保留原始布局
【发布时间】：2019-12-02 10:16:37
【问题描述】：

问题是我有一个定义为侧边栏区域和主要区域的网格。但是当我用“主”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。

【问题讨论】：

由于您明确定义了每个元素的网格区域，因此您明确地将元素放置在网格中。 HTML 顺序无关紧要

标签： html css flexbox css-grid

【解决方案1】：

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

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

解决了这个问题

【讨论】：