Html 我可以设置网格'；将图元移动到另一个网格的某个区域？

我有一个主CSS网格，它包含两个不同块中的另外两个网格（1和2）。 每个网格定义自己的区域，每个“网格项”都设置在各自的区域中（例如：

网格区域：top1；

）

下面是一个html示例：

。主网格{
显示：网格；
网格模板列：200px；
网格模板行：自动；
网格模板区域：
“左”
“对”；
@媒体屏幕和屏幕（最小宽度：40em）{
网格模板列：100px 50px；
网格模板区域：
“左-右”；
}
}
.grid-1{
网格区域：左侧；
}
.内部{
显示：网格；
网格模板列：100%；
网格模板行：自动；
}
.网格-1.内部{
网格模板区域：
“top1”
“底部1”；
}
.grid-2{
网格区域：右；
}
.网格-2.内部{
网格模板区域：
“top2”
“中间人2”
“底部2”；
}
.项目a、项目b、项目c、项目d、项目e{
边框：1px纯黑；
文本对齐：居中；
}
.项目a{
网格面积：top1；
@媒体屏幕和屏幕（最小宽度：40em）{
高度：50px；
}
}
.项目b{
网格面积：top2；
@媒体屏幕和屏幕（最小宽度：40em）{
高度：50px；
网格面积：1；
}
}
.项目-c{
网格面积：1；
@媒体屏幕和屏幕（最小宽度：40em）{
网格面积：top2；
}
}
.项目-d{
网格面积：2；
}
.项目e{
网格区域：底部2；
}

A.
B
C
D
E

我不完全清楚你想做什么

但有一件事需要注意：

将

网格模板列

、

网格模板行

和

网格模板区域

应用于

内部

元素

.grid-1 .inner {
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas: "top1" "bottom1";
}

.grid-2 .inner {
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas: "top2" "middle2" "bottom2";
}

这些是网格容器属性。除非元素还具有

display:grid

或

display:inline grid

，否则它们将无效。在代码中，

.internal

元素是

display:block

（默认值）

由于

.internal

不是网格容器，因此通过

.item-e

指定给其子元素的网格属性无效

---

请记住，a的范围是父子关系。不是网格容器子元素的元素不是网格项，将忽略网格属性。因此，如果要将网格容器属性应用于父级，将网格项属性应用于子级，则必须始终使用

display:grid

或

display:inline grid

。

是否要使用

position:absolute

？我忘记添加

display:grid。我想做的是将小型设备的订单更改为ACDBE。但正如你提到的，我想这是不可能的。AB在一个上下文中，CDE在另一个上下文中。