HTML CHEAT SHEET

CSS Grid

CSS Grid gives you incredible control over splitting a page into subsections.

Use the following page as a reference: https://css-tricks.com/snippets/css/complete-guide-grid/

There are multiple ways to setup a grid. We will cover the most common use-cases

Start with a container grid then define each cell

.container {
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    grid-template-areas:
        "header header header header"   /* note lack of semicolon! */
        "main main . sidebar"           /* note lack of semicolon! */
        "footer footer footer footer";  /* note the semicolon! */
}

/* All .container children have these properties */
.container > div {
    border: 1px black solid;
    border-radius: 10px;
    padding: 10px;
}

.top {
    background-color: orange;
    grid-area: header;  /* Assign to `header` section*/
}

.left-side {
    background-color: blue;
    grid-area: main;  /* Assign to `main` section*/
}

.right-side {
    background-color: red;
    grid-area: sidebar;   /* Assign to `sidebar` section*/
}

.bottom {
    background-color: green;
    grid-area: footer;   /* Assign to `footer` section*/
}

<div class="container">
    <div class="top">Orange</div>
    <div class="left-side">Blue</div>
    <div class="right-side">Red</div>
    <div class="bottom">Green</div>
</div>