CSS GRID最基础的代码，太强大了

HTML部分

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <div class="container">
        <nav>Navbar</nav>
        <main>Main</main>
        <div id="sidebar">Sidebar</div>
        <div id="content1">Content1</div>
        <div id="content2">Content2</div>
        <div id="content3">Content3</div>
        <footer>Footer</footer>
    </div>
</body>
</html>

CSS部分

:root {
    --main-radius: 5px;
    --main-padding: 5px;
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr;
    grid-template-areas: 
        "nav nav nav nav"
        "sidebar main main main"
        "sidebar content1 content2 content3"
        "sidebar footer footer footer";
    grid-gap: 0.2rem;
}

nav {
    background: #a7ffeb;
    grid-area: nav;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

main {
    background: #84ffff;
    grid-area: main;
}

#sidebar {
    background: #18ffff;
    grid-area: sidebar;
}

#content1 {
    background: #6fffd2;
    grid-area: content1;
}

#content2 {
    background: #64ffda;
    grid-area: content2;
}

#content3 {
    background: #73ffba;
    grid-area: content3;
}

footer {
    background: #1de9b6;
    grid-area: footer;
}

@media only screen and (max-width: 550px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
        grid-template-areas: 
            "nav"
            "sidebar"
            "main"
            "content1"
            "content2"
            "content3"
            "footer";
        
    }
}

发表评论