/*  */

.container{
    width: 100%;

    display: grid;

    grid-template-rows: 100px 200px 1fr 100px;
    /* grid-template-columns: repeat(auto-fill, 200px); */
    grid-template-columns: minmax(150px,200px) repeat(3, 1fr);

    /* Keep height of rows */
    grid-auto-rows: 150px;

    grid-gap: 30px;
}

.container > *{
    background-color: #eeeeee;
    padding: 20px;
    font-size: 30px;
}

.header{
    background-color: pink;
    grid-column: 1 / -1;
}

.sidebar{
    background-color: teal;
    grid-column: 1 / 2;
    grid-row: 2 / span 2;
}

.box-1{
    background-color: yellowgreen;
}

.box-2{
    background-color: crimson;
}

.box-3{
    background-color: goldenrod;
}

.main{
    background-color: indianred;
    grid-column: 2 / span 3;
    min-height: 300px;
}

.footer{
    background-color: mediumaquamarine;
    grid-row: 4 / 4;
    grid-column: 1 / 5;
}