/* to create a basic grid 

.list{
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 300px 200px 150px;
} */

/* 
 to make code shorter
 .list{
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 300px);
} */

/* fr - units for responsible container 
.list{
    display: grid;
    grid-template-columns: 1fr 1fr 4fr;
    grid-template-rows: repeat(3, 300px);
} */

/* grid-gap:row-gap colomn gap; 
.list{
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 300px);
    grid-gap: 20px 50px;
} */

/* .list{
    display: grid;
    grid-template-columns: repeat(3, 150px);
    grid-template-rows: repeat(3, 300px);
    grid-gap: 20px 50px;
}

#box1{
    grid-column-start: 1;
    grid-column-end: 4;
}

#box2{
    grid-row-start: 2;
    grid-row-end: 5;
}

#box3{
    grid-column:2 / 4;
    grid-row: 3 / 5;
}

.item{
    width: 100%;
    height: 100%;
    background-color: yellow;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text{
    color: red;
} */

.container{
    height: 100%;
    display: grid;
    grid-gap: 20px 20px;
    grid-template-areas: "header header"
                         "content sidebar"
                         "footer footer";
}

#header{
    display: grid;
    grid-area: header;
}
#content{
    display: grid;
    grid-area: content;
}
#sidebar{
    display: grid;
    grid-area: sidebar;
}
#footer{
    display: grid;
    grid-area: footer;
}
.header{
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: red;
    border-radius: 20px;
}

.header-title{
    color: white;
    text-align: center;
}

.content{
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: green;
    border-radius: 20px;
}

.content-title{
    color: white;
    text-align: center;
}

.sidebar{
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: orange;
    border-radius: 20px;
}

.sidebar-title{
    color: white;
    text-align: center;
}

.footer{
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: blue;
    border-radius: 20px;
}

.footer-title{
    color: white;
    text-align: center;
}