CSS 그리드 템플릿 영역에서 손자 엘리먼트 이동하기

Question

CSS grid-template-areas을 배우려고합니다.

하지만 내 코드는 의도 영역 템플릿처럼 작동하지 않습니다 :

이

은 "제목 제목"
이 "모두-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 마스! :) 좋아

Answer 1

에 대한

덕분에, 어쩌면이 사람을 도움이 될 것입니다. CSS 모두 flexbox 및 grid는 직접 어린이 항목으로 (그래서 손자 가능 항목 수없는)을 가지고 있기 때문에

그것은, 내가 원하는 일을 할 수 없습니다.

따라서 두 섹션을 제외하고 동일한 부모 아래 왼쪽 ab와 오른쪽 ab를 모두 넣어야했습니다. 이렇게하면 left-a을 right-a 옆에 넣고 left-b을 right-b 옆에 넣을 수 있습니다.

이 결과 코드는 다음과 같습니다
이 (내 CSS 기술은 매우 가난, 수정은 매우 환영받을된다!)

* { 
 
    border: 1px black solid; 
 
} 
 

 
.wrapper { 
 
    display: grid; 
 
    grid-template-areas: "title" "both" "left-right"; 
 
} 
 

 
.wrapper>header { 
 
    grid-area: title; 
 
} 
 

 
.both { 
 
    grid-area: both; 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    align-items: stretch; 
 
} 
 

 
.both>* { 
 
    flex: 1; 
 
} 
 

 
.left-right { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    align-items: stretch; 
 
} 
 

 
.left-right>* { 
 
    flex: 1; 
 
    min-width: 40%; 
 
} 
 

 
.both>.topic-a { 
 
    order: 1; 
 
} 
 

 
.both>.topic-b { 
 
    order: 2; 
 
} 
 

 
.topic-a.left-side { 
 
    order: 3; 
 
} 
 

 
.topic-b.left-side { 
 
    order: 5; 
 
} 
 

 
.topic-a.right-side { 
 
    order: 4; 
 
} 
 

 
.topic-b.right-side { 
 
    order: 6; 
 
} 
 

 
.left-side { 
 
    color: red; 
 
    background-color: #FCC; 
 
} 
 

 
.right-side { 
 
    color: blue; 
 
    background-color: lightblue; 
 
}

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

 
    <div class="left-right"> 
 

 

 
    <section class="topic-a left-side"> 
 
     <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 left-side"> 
 
     <ol> 
 
     <li>left-B 1st item</li> 
 
     <li>2nd item</li> 
 
     <li>3rd item</li> 
 
     </ol> 
 
    </section> 
 

 

 

 
    <section class="topic-a right-side"> 
 
     <ol> 
 
     <li>right-A 1st item</li> 
 
     <li>2nd item</li> 
 
     <li>3rd item</li> 
 
     </ol> 
 
    </section> 
 
    <section class="topic-b right-side"> 
 
     <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> 
 

 

 
    </div> 
 

 
</article>