Sähköinen asiointipalvelu, johdanto

Sorakuilu

Demo 7, holygrail-asemointi gridillä

Holy Grail Layout on sivu, jossa on header, footer ja kolme saraketta. Keskimmäisessä sarakkeessa on pääsisältö ja vasen sekä oikea sarake sisältävät navigoinnin ja lisäosia esim. lisätietoja tai mainoksia.

Layoutin voi tehdä eri tavoilla, tässä demossa tutkitaan flexiä ja gridiä.

CSS:lle annetaan tavallisesti Holy Grail layoutissa seuraavia tavoitteita:

Tehtävä: Laadi alla olevan kuvan mukainen asemointi gridin avulla.

holygrail-asemointi

Internet on täynnä hyviä ratkaisuja, käytämme tässä niitä hyväksi: haemme valmiin ratkaisun ja kommentoimme sen hyvin:

Flex-toteutus

Lähde: developerdrive ohjeet

Grid-toteutus

Lähde: computerhope

FLEX lähdekoodit

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/demo7a.css">
    <title>Demo 7 a</title>
</head>
<body>
  <div class="container">
    <header>
        HEADER
    </header>
    <div class="content">
        <main>Pääsisältö</main>
        <aside class="left-sidebar">LEFT SIDEBAR</aside>
        <aside class="right-sidebar">RIGHT SIDEBAR</aside>
    </div>
    <footer>
        FOOTER
    </footer>
  </div>
    

</body>
</html>

css

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

body {
    color: white;
    text-align: center;
    font-size: 24px;
    line-height: 3;
}

header {
    background: orangered;
}

main {
    background: darkslateblue;
}
footer {
    background: deeppink;
}

.left-sidebar {
    background: dodgerblue;
}

.right-sidebar {
    background: forestgreen;
}


.container,
.content {
    display: flex;
    flex-direction: column;
}

@media all and (min-width: 768px) {
    .content {
        flex-direction: row;
        flex-wrap: wrap;
    }

    main {
        flex: 2;
        order: 2;
        min-height: 80vh;
    }

    .left-sidebar {
        order: 1;
        flex: 1;
    }

    .right-sidebar {
        order: 3;
        flex: 1;
    }

}

GRID lähdekoodit

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo 7 b</title>
    <link rel="stylesheet" type="text/css" href="./css/demo7b.css">
</head>
<body>
    <div class="container">
        <header>
            header
        </header>
        <aside class="leftpanel">
            left panel
        </aside>
        <main>
            main
        </main>
        <aside class="rightpanel">right panel</aside>

        <footer>
            footer
        </footer>
    </div>
</body>
</html>

css

* {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


/*body {
    height:100%;
}*/


div.container {
    display: grid;
    width: 100%;
    height:100%;
    grid-template-columns: [left] 10rem auto 10rem [right];
    grid-template-rows: 5rem auto 5rem;
    grid-template-areas:
    "head head head"
    "panleft mainbody panright"
    "foot foot foot";
}

header {
    background: rgb(0,0,0,0.2);
    grid-area: head;
}

footer {
    background: rgb(0,0,0,0.2);
    grid-area: foot;
}
.leftpanel {
    background: rgb(0,0,0,0.1);  
    grid-area: panleft;
}

.rightpanel {
    background: rgb(0,0,0,0.1);  
    grid-area: panright;
}

main {
    grid-area: mainbody;
}

@media screen and (max-width: 50rem) {
    .leftpanel {
        grid-column-end: left;
        display:none;
    }
    .rightpanel {
        grid-column-start: right;
        display:none;
    }
    main {
        grid-column-start: left;
        grid-column-end: right;
    }
}