0
私はCSS grid-template-areasを学びたいと思っています。CSSグリッドテンプレートエリアの孫要素を移動する
しかし、私のコードが意図したエリアのテンプレートのように機能していません。
"タイトルタイトル"
"の両方-Aの両方-B"
"左から右"、左側
を「 -b右-b "
すべての左の項目は、対応する（" a "または" b "）右の項目の左側にある必要があります。
* {
border: 1px solid black;
}
.wrapper {
display: grid;
grid-template-areas: "title title"
"both-a both-b"
"left-a right-a"
"left-b right-b";
}
.wrapper > header {
grid-area: title;
}
.both > .topic-a {
grid-area: both-a;
}
.both > .topic-b {
grid-area: both-b;
}
.left > .topic-a {
grid-area: left-a;
}
.left > .topic-b {
grid-area: left-b;
}
.right > .topic-a {
grid-area: right-a;
}
.right > .topic-b {
grid-area: right-b;
}
.left-side {
color: red;
}
.right-side {
color: blue;
}<article class="wrapper">
<header><h1>Title</h1></header>
<section class="both">
<section class="topic-a">
<ol>
<li>both-A 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
<section class="topic-b">
<ol>
<li>both-B 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
</section>
<section class="left-side">
<section class="topic-a">
<ol>
<li>left-A 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
</ol>
</section>
<section class="topic-b">
<ol>
<li>left-B 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
</section>
<section class="right-side">
<section class="topic-a">
<ol>
<li>right-A 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
<section class="topic-b">
<ol>
<li>right-B 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
</ol>
</section>
</section>
</article>私はそれはおそらく、愚かな間違いだけど、私はそれを把握することはできません。任意のヘルプとメリーXマスのための
感謝！:)
グリッドは、親と子の関係に取り組んでいます。グリッドの大部分にグリッド区域スタイルを与えていますが、これは機能しません。 – vals
@valsああ、私は見る！ヘッドアップをありがとう！グリッドを入れ子にしますか？フレックスボックスですか？問題は残っていますが、これらは異なるセクションの子供です...おそらく私は親を削除して孫の代わりに子供にする必要があります。 – flen
あなたの決定はあなたのものです...しかし、おそらくあなたはグリッドの内側にフレックスボックス私が見ることができるレイアウト – vals