Layout à base de Grid avec une Sidebar, un Header et un Footer

Résultat :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
 
    <!-- EN-TÊTE -->
 
    <header>
        <nav>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </nav>
    </header>
 
    <!-- SIDEBAR -->
 
    <nav class="sidebar">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>...</li>
        </ul>
    </nav>
 
    <!-- PARTIE PRINCIPALE -->
 
    <main>
 
        <article>
            <p>Lorem ipsum dolor sit amet, ...</p>
            <p>Obcaecati distinctio doloremque ...</p>
            <p>...</p>
        </article>
 
    </main>
 
    <!-- PIED DE PAGE -->
 
    <footer>
        <p>Hi, this is the footer.</p>
    </footer>
 
</body>
</html>

CSS

styles.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    background-color: aquamarine;
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 200px auto;
    grid-template-rows: 60px auto 60px;
}
 
header {
    background-color: gold;
    padding: 1em;
    grid-column: 1 / span 2;
}
 
nav.sidebar {
    background-color: dodgerblue;
    overflow-x: hidden;
    overflow-y: scroll;
}
 
main {
    overflow: scroll;
    background-color: darkseagreen;
    padding: 1em;
}
 
footer {
    background-color: forestgreen;
    grid-column: 1 / span 2;
}

Cramnurbel

Panneau latéral

Plan du Site:

Table des matières

Layout à base de Grid avec une Sidebar, un Header et un Footer

HTML

CSS

Cramnurbel

Outils pour utilisateurs

Outils du site

Panneau latéral

Plan du Site:

Table des matières

Layout à base de Grid avec une Sidebar, un Header et un Footer

HTML

CSS

Outils de la page