Resolved
Written on
·
236
0
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 2fr 40px;
grid-template-areas:
"avatar icon icon ......"
"avatar welcome welcome ......"
"avatar point1 point2 close";
.avatar {
grid-area: avatar;
}
.icon {
grid-area: icon;
}
.welcome {
grid-area: welcome;
}
.box {
.point1 {
grid-area: point1;
}
.point2 {
grid-area: point2;
}
}
}
이 코드에서 .point1과 .point2가 ...... 자리에 들어가는데요
혹시 하위 클래스는 grid-area인식이 안되나요?
Answer 1
1
Grid 아이템의 자식요소들 말씀이신거죠? 네 맞습니다.
<div class="container">
<div class="item"></div>
<div class="item">
<div class="foo"></div>
<div class="foo"></div>
</div>
<div class="item"></div>
<div class="item"></div>
</div>
이런 구조에서 .container가 Grid 컨테이너라면 .foo는 Grid 아이템으로 동작하지 않아요~