style.css

div {
    margin: 5px;
}

.content {
    border: 2px solid blueviolet;
}

.element {
    background-color: aqua;
    border: 1px solid black;
    margin: 10px;
    border-radius: 10px;
    padding: 10px;
    height: 20px;
}

.container {
    display: flex;
}

.column {
    flex-direction: column;
}

.center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.end {
    width: 300px;
    align-items: flex-end;
}

.reversed {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.grid {
    display: grid;
    grid-template-areas: "auto auto auto";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px;
}

/* not correct to do, we should use media queries to change behaviour, just for demo purposes */
.grid-mobile {
    display: grid;
    grid-template-areas: "auto"
        "auto"
        "auto";
    grid-template-rows: 50px 200px 50px;
}

.header {
    grid-area: header;
    background-color: #226666;
    border: 1px solid black;
    color: white;
}

.main {
    grid-area: main;
    display: flex;
    background-color: #AA3939;
    border: 1px solid black;
    color: white;
    align-items: center;
    justify-content: center;
}

.footer {
    grid-area: footer;
    background-color: #7A9F35;
    border: 1px solid black;
}

.grid-areas {
    display: grid;
    grid-template-rows: 30px 200px 30px;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas: "header header header"
        ". main ."
        "footer footer footer";
}