display:grid的使用方法

声明容器

#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>

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