body {
    margin: 0;
    font-family: Arial, sans-serif;
}
header{
    grid-area:header;
}
nav{
    display:grid;
    display: flex;
    justify-content: space-around; 
    padding: 1rem;
    background-color: #f8f8f8; 
}
main{
    padding-left: 2rem;
    padding-right:2rem
}
.parent {
    display: grid;
    grid-template-columns: 0.2fr 0.5fr 300px 0.5fr 0.2fr;
    grid-template-rows: 1fr 200px 1fr 0.5fr repeat(3, 1fr);
    gap: 0; 
    height: 100vh; 
}

.grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff; 
}

.div1 {
    background-color: rgba(255, 0, 0, 0.6); 
    grid-area: 1 / 2 / 2 / 5; 
}

.div2 {
    background-color: rgba(0, 255, 0, 0.6); 
    grid-area: 1 / 1 / 2 / 2; 
}

.div3 {
    background-color: rgba(0, 0, 255, 0.6); 
    grid-area: 1 / 5 / 2 / 6; 
}

.div4 {
    background-color: rgba(255, 165, 0, 0.6); 
    grid-area: 2 / 1 / 4 / 6; 
}

.div5 {
    background-color: rgba(128, 0, 128, 0.6); 
    grid-area: 4 / 2 / 8 / 5; 
}

.div6 {
    background-color: rgba(255, 192, 203, 0.6);
    grid-area: 4 / 1 / 8 / 2; 
}

.div7 {
    background-color: rgba(255, 255, 0, 0.6); 
    grid-area: 4 / 5 / 8 / 6; 
}