Skip to content

Instantly share code, notes, and snippets.

@SarahElson

SarahElson/index.html

Created October 13, 2022 05:59
Download ZIP

Revisions

  1. SarahElson created this gist Oct 13, 2022.
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Creating and Structuring the grid layout</title>
    </head>
    <body>
    <div class="container">
    <div class="header">Header</div>
    <div class="menu">Menu</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
    </div>
    </body>
    </html>
    54 changes: 54 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    .container > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: #ffeead;
    }

    html,
    body {
    background: #ffeead;
    padding: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 28px;
    }

    /* =============================== */

    /* MAIN CSS GRID CODE */
    .container {
    height: 100%;
    display: grid;
    grid-template-columns: 200px 200px;
    grid-gap: 13px;
    }

    /* =============================== */

    .container > div:nth-child(1n) {
    background: #ce96ca;
    }

    .container > div:nth-child(3n) {
    background: #88d8b0;
    }

    .container > div:nth-child(2n) {
    background: #ff6f69;
    }

    .container > div:nth-child(4n) {
    background: #ffcc5c;
    }

    .grid-item:is(:nth-child(3), :nth-child(5), :nth-child(8), :nth-child(12), :nth-child(17)) {
    grid-column: span 3;
    grid-row: span 2;
    }