<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
<h1>layout 1</h1>
<div class="box layout1">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
</div>
<h1>layout 2</h1>
<div class="box layout2">
    <div class="col2 one">1</div>
    <div class="col2 two">2</div>
    <div class="col2 three">3</div>
    <div class="col2 four">4</div>
</div>

<h1>layout 3</h1>
<div class="box holy">
    <nav>Navbar</nav>
    <main>
        <div class="left">Left Sidebar</div>
        <div class="main">Main Content</div>
        <div class="right">Right Sidebar</div>
    </main>
    <footer>Footer</footer>
</div>

</body>

</html>


<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #efefef;
    font-family: 'Open Sans', 'sans-serif';
}

h1 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* utilities start */
.box>* {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.box {
    background-color: cornflowerblue;
    width: 80%;
    margin: 0 auto;
    margin-top: 1rem;
    padding: 2rem;
}

/* utilities end */

/* layout1 start */
.layout1 {
    display: grid;

    /* 每一行要有幾個格 */
    /* minmax(10rem, 1fr) div 元件最小要10rem，不然就是1fr*/
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

    /* 格和格的間距 */
    gap: 2rem;

}

.col {
    width: 100%;
    height: 10rem;
    background-color: #fff;
}

/* layout1 end */

/* layout2 start */
.layout2 {
    display: grid;
    grid-template-areas: 'one one two'
    'one one three'
    'one one four';
    grid-template-rows: 10rem 10rem 10rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.one {
    grid-area: one;
}

.col2 {
    width: 100%;
    background-color: #fff;
}

@media screen and (max-width: 600px) {
    .layout2 {
        grid-template-rows: 10rem 10rem 10rem 10rem;
        grid-template-columns: 1fr;
        grid-template-areas: 'one'
    }
}

/* layout2 end */

/* layout3 start */
.holy {
    display: grid;
    /* min-content：高度會到一個程度，不然高度會固定 */
    grid-template-rows: 1fr min-content 1fr;
    gap: 2rem;
    text-align: center;
}

.holy nav {
    background-color: honeydew;
    height: 9rem;
}

.holy main {
    display: grid;
    background-color: none;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
}

.holy main>* {
    background-color: lavender;
    height: 20rem;
}

.holy footer {
    background-color: lightgoldenrodyellow;
    height: 9rem;
}

@media screen and (max-width: 600px) {
    .holy main {
        grid-template-columns: 1fr;
    }
}

/* layout3 end */
</style>
arrow
arrow
    文章標籤
    HTML CSS Grid
    全站熱搜

    bingzhichen 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄