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

问题描述 投票:0回答:1

问题是我有一个定义为侧边栏区域和主区域的网格。但是,当我用“ 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属性。但是只有网格自动列网格自动行,负责处理额外生成的列或原始数据。

html css flexbox css-grid
1个回答
0
投票

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

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

已解决此问题

© www.soinside.com 2019 - 2024. All rights reserved.