问题是我有一个网格定义到一个侧边栏区域和一个主要区域。 但是,当我用“主”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 负责处理额外生成的列或原始数据。
最佳答案
结果就像 Temani Afif 在按名称定义区域时所说的那样,这些为 html 的顺序创建了一个静态模板。
删除:
grid-template-areas:"sidebar main main";
修复了这个
关于html - 更改定义网格内的 div 位置可保持原始布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59136772/