Skip to content

Instantly share code, notes, and snippets.

@featheredtoast

featheredtoast/css-grid.css

Created February 22, 2018 16:03
Download ZIP

Revisions

  1. featheredtoast created this gist Feb 22, 2018.
    33 changes: 33 additions & 0 deletions css-grid.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    body {
    margin: 0;
    height: 100vh;
    background-color: white;
    display: grid;
    grid-template-columns: 1fr 1fr 120;
    grid-template-rows: 50px auto 20px;
    grid-template-areas:
    "header header header"
    "secondary main sidebar"
    "footer footer footer";
    }

    header {
    background: pink;
    grid-area: header;
    }
    main {
    background: green;
    grid-area: main;
    }
    div {
    background: brown;
    grid-area: secondary;
    }
    nav {
    background: blue;
    grid-area: sidebar;
    }
    footer {
    background: red;
    grid-area: footer;
    }
    21 changes: 21 additions & 0 deletions css-grid.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css-grid.css">
    </head>
    <body>
    <header>
    header welcome in
    </header>
    <nav>
    nav elements~
    </nav>
    <main>
    main content here yay
    </main>
    <div>
    </div>
    <footer>
    footer
    </footer>
    </body>
    </html>