벤딩머신 그리드 연습

HTML

<body>
    <section>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
        <div class="pay-container">
            <div class="pay-item">1</div>
            <div class="pay-item">2</div>
            <div class="pay-item">3</div>
            <div class="pay-item">4</div>
            <div class="pay-item">5</div>
            <div class="pay-item">6</div>
        </div>
    </section>
</body>

CSS

 <style>
        section{
            width: 360px;
            height: 545px;
            background-color: skyblue;
            display: inline-block;
        }

        .container{
            display: grid;
            grid-template-rows: repeat(2,130px);
            grid-template-columns: repeat(3,94px) ;
            grid-gap: 12px;
            margin: 31px 27px 0;
            background-color: blue;
        }

        .item{
            background-color: white;
        }

        .pay-container{
            display: grid;
            grid-template-rows: 32px 32px 106px ;
            grid-template-columns: repeat(3, 94px);
            grid-gap: 12px;
            margin: 20px 27px 0px;
            background-color: blue;
        }

        .pay-item{
            background-color: white;
        }

        .pay-item:nth-child(1){
            grid-column: 1/3;
        }

        .pay-item:nth-child(3){
            grid-column: 1/3;
        }

        .pay-item:nth-child(5){
            grid-column: 1/3;
        }
        
        .pay-item:nth-child(6){
            grid-column: 3/4;
        }

두 개의 그리드를 사용한 이유

두 그리드 모두 grid-gap 이 12px로 동일했으나
그리드 사이의 간격이 20px이었음!
그리드에서 어려운건 역시 row column 헷갈리는 거다 ^..^
row column은 언제 익숙해지는 건가요

[레벨1-자판기] 기억 남는 프로로그
React vs Vue 상태 변화 메커니즘의 차이

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage