声明容器

#app{
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 50px auto 50px;
grid-template-areas: "header header" "sidebar main" "footer footer";
} 
//声明容器是grid,并将列分为200px,和auto  将行分为50px,auto,50px,至此一个六宫格的grid产生了,通过grid-template-areas来分配这六宫格怎么使用,

#footer{grid-area: footer;}
#header{grid-area: header;}
#side{grid-area: sidebar;}
#main{grid-area: main;}

//基础样式
      * { 
        margin: 0; 
        padding: 0; 
      }
      html, 
      body, 
      #app { 
        margin: 0; 
        padding: 0; 
        height: 100%; 
      }
      #header, #footer {
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #555;
        color: #fff;
      }
      #side { 
        width: 200px; 
        background: #eee;
        
      }

<div id="app">
    <header id="header">顶部</header>
    <aside id="side">左侧</aside>
    <div id="main">内容</div>
    <footer id="footer">底部</footer>
</div>

最终的展示效果就是一个标准的顶部+(左导航+右内容)+底部的布局

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐