css bakery.html的代码，灵活的网格布局。

Posted 2021-05-13

@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;
  }
}