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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css bakery.html的代码,灵活的网格布局。相关的知识,希望对你有一定的参考价值。

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

以上是关于css bakery.html的代码,灵活的网格布局。的主要内容,如果未能解决你的问题,请参考以下文章

动态灵活的网格布局

CSS 1KB网格 - 灵活且最小化

markdown 布尔玛响应网格偏移修改器。

网格布局

十字绣

如何在 Vue Material 中设置灵活的网格