Question

我有一个主要的CSS网格，其中包含两个不同块中的另外两个网格（1和2）。每个网格都定义了自己的区域，以及每个网格项目＆＃34;在各自的区域中设置（例如：grid-area: top1;）。

这是一个html示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我想知道是否可以将.item-a设置为.grid-2区域？

由于某些原因，媒体查询不在此处工作，因此我创建了Codepen snippet in scss

Answer 1

我并不完全清楚你要做什么。

但是有一点需要注意：

您已将grid-template-columns，grid-template-rows和grid-template-areas应用于.inner元素。

.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。

我可以将网格元素设置为另一个网格的区域吗？

1 个答案: