グリッドの要素を別のグリッドの領域に設定できますか？

Question

私は2つの他のグリッド（1と2）を2つの異なるブロックに含むメインのCSSグリッドを持っています。 すべてのグリッドは独自の領域を定義し、すべてのグリッド項目はそれぞれの領域に設定されます（例：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>

私はそれが.grid-2の領域に.item-aを設定することが可能ですかどうかを知りたいのですが？メディアクエリはここで働いていないいくつかの理由

ので、私はCodepen snippet in scss

Answer 1

を作成しそれはあなたが何をしようとして私には完全には明らかではありません。あなたが.inner要素に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-e –スルー– .item-aを割り当てグリッドのプロパティは何の効果も有していません。

grid formatting contextの範囲が親子関係であることを覚えておいてください。グリッドコンテナの子ではない要素はグリッド項目ではなく、グリッドプロパティを無視します。したがって、グリッドコンテナのプロパティを子の親アイテムとグリッドアイテムプロパティに適用する場合は、常にdisplay: gridまたはdisplay: inline-gridを使用する必要があります。