我有一个主 CSS 网格,它在两个不同的 block 中包含另外两个网格(1 和 2)。
每个网格都定义了自己的区域,每个“网格项”都设置在各自的区域中(例如:grid-area: top1;
)。
这是一个 html 示例:
.main-grid {
display: grid;
grid-template-columns: 200px;
grid-template-rows: auto;
grid-template-areas:
"left"
"right";
@media screen and (min-width: 40em) {
grid-template-columns: 100px 50px;
grid-template-areas:
"left right";
}
}
.grid-1 {
grid-area: left;
}
.inner {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
}
.grid-1 .inner {
grid-template-areas:
"top1"
"bottom1";
}
.grid-2 {
grid-area: right;
}
.grid-2 .inner {
grid-template-areas:
"top2"
"middle2"
"bottom2";
}
.item-a, .item-b, .item-c, .item-d, .item-e {
border: 1px solid black;
text-align: center;
}
.item-a {
grid-area: top1;
@media screen and (min-width: 40em) {
height: 50px;
}
}
.item-b {
grid-area: top2;
@media screen and (min-width: 40em) {
height: 50px;
grid-area: bottom1;
}
}
.item-c {
grid-area: bottom1;
@media screen and (min-width: 40em) {
grid-area: top2;
}
}
.item-d {
grid-area: middle2;
}
.item-e {
grid-area: bottom2;
}
<div class="main-grid">
<div class="grid-1">
<div class="inner">
<div class="item-a">A</div>
<div class="item-b">B</div>
</div>
</div>
<div class="grid-2">
<div class="inner">
<div class="item-c">C</div>
<div class="item-d">D</div>
<div class="item-e">E</div>
</div>
</div>
</div>
我想知道是否可以将 .item-a
设置为 .grid-2
的区域?
由于某些原因,媒体查询在这里不起作用,所以我创建了一个 Codepen snippet in scss
最佳答案
我不太清楚你要做什么。
但是有一点需要注意:
您将 grid-template-columns
、grid-template-rows
和 grid-template-areas
应用于 。内部
元素。
.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
,否则它们将无效。在您的代码中,.inner
元素是 display: block
(默认)。
因为.inner
不是一个网格容器,网格属性分配给它的子元素——.item-a
到.item-e
– 没有效果。
请记住 grid formatting context 的范围是父子关系。不是网格容器子元素的元素不是网格项,将忽略网格属性。因此,如果要将网格容器属性应用于父项并将网格项属性应用于子项,则始终必须使用 display: grid
或 display: inline-grid
。
关于html - 我可以将一个网格的元素设置为另一个网格的区域吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44843035/