时间戳

首页 > 解决方案 > 更改已定义网格内的 div 位置可保留原始布局

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

问题描述

问题是我有一个定义为侧边栏区域和主要区域的网格。但是当我用“主”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-columns grid-auto-rows 负责处理额外生成的列或原始数据。

标签： htmlcssflexboxcss-grid

解决方案

结果就像Temani Afif在按名称定义区域时所说的那样，它们为 html 的顺序制作了一个静态模板。
删除：

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

修复了这个

推荐阅读