음악, 삶, 개발

SCSS 로 만든 layer 클래스 본문

개발 Web/HTML & CSS

SCSS 로 만든 layer 클래스

Lee_____ 2020. 12. 22. 19:31
@mixin layer {

    .layer {

        display: grid;
        grid-template-columns: 1fr;

        * {

            grid-column-start   : 1;
            grid-row-start      : 1;

        }

    }
}

@include layer;

이렇게 해놓으면, 자식 요소에는 아무런 처리를 해주지않아도,

부모 크기에 맞춰 100% 100% 가 되고, 포토샵처럼 완전 같은 위치에 레이어할수있다.

<template>
    
    <div class="full layer">

        <div></div>
        <div></div>
        <div></div>
        <div></div>

    </div>

</template>