Code for bakery.html, flexible grid layout.
@media screen and (min-width: 940px) {
#container {
display: grid;
grid-template-rows: auto min-height 5em;
grid-template-columns: minmax(25em, 1fr) 16em;
grid-template-areas:
"banner banner"
"main hours"
"footer footer";
max-width: 1200px;
margin: 0 auto;
position: relative;
}
header {
grid-area: banner;
}
main {
grid-area: main;
}
aside {
grid-area: hours;
background: url(images/scallop.png) repeat-y left top;
background-color: #F6F3ED;
padding: 1em;
padding-left: 45px;
}
footer {
grid-area: footer;
}
#award {
position: absolute;
top: 30px;
left: 50px;
}
}