[자주 쓰는 컴포넌트] - 그리드 레이아웃

서론

인스타에서 발견한 릴스인데, 그리드 형식의 반응형 레이아웃이였다. 요긴하게 쓰일 것 같아 따라 만들어 보았다. 따라 만들면서 그리드 사용법을 간단하게나마 알 수 있었다.

html

 <div class="layout">
            <header>Header</header>
            <nav>Sidebar</nav>
            <main>Main</main>
            <article class="widget">widget</article>
            <article class="statistics">statistics</article>
            <footer>Footer</footer>
        </div>

css

.layout {
    display: grid;
    gap: 4px;
    grid-template-rows: 40px 40px auto 60px 60px 40px;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "sidebar" "main" "widget" "statistics" "footer";
    height: 100vh;
    text-align: center;
}

@media (min-width: 480px) {
    .layout {
        display: grid;
        grid-template-rows: 40px auto 80px 40px;
        grid-template-columns: 160px auto auto;
        grid-template-areas:
            "header header header"
            "sidebar main main"
            "sidebar widget statistics"
            "footer footer footer";
    }
}

header {
    grid-area: header;
    background-color: blueviolet;
}

nav {
    grid-area: sidebar;
    background-color: yellow;
}

main {
    grid-area: main;
    background-color: aquamarine;
}

.widget {
    grid-area: widget;
    background-color: darkorange;
    width: 100%;
}

.statistics {
    grid-area: statistics;
    background-color: blanchedalmond;
    width: 100%;
}

footer {
    grid-area: footer;
    background-color: salmon;
}

결과