Hi Guys I need help displaying layout in CSS. Here is i want the layout to display like.
https://i.stack.imgur.com/HCIJ0.png
Here is what i have so far in CSS but can’t get the menu zone to fully expand down height. Any suggestions? i’m using display grid as layout.
.page{
display: grid;
grid-template-columns:29% 71%;
justify-content: flex-start;
align-content: start;
}
.section-header{
grid-column: 1/3;
display:grid
grid-row:row;
background-color:blue;
color:#fff;
}
.zone-menu-wrapper{
grid-row:1/3;
background-color:#286dc5;
}
.zone-topper-wrapper{
grid-row:1/3;
}
.section-main{
grid-column:2/3;
background-color:orange;
}
.section-footer{
grid-column: 2/3;
background-color:yellow;
}
.zone-branding-wrapper{
grid-column:2/3;
}
.zone-menu{
width:29%;
display:inline-block;
}
