인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

new code's profile image
new code

asked

Learn CSS Flex and Grid Properly

하위 클래스는 grid-area인식이 안되나요?

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인식이 안되나요?

flexHTML/CSS

Answer 1

1

studiomeal님의 프로필 이미지
studiomeal
Instructor

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 아이템으로 동작하지 않아요~

new code's profile image
new code

asked

Ask a question