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>

最終的展示效果就是一個標準的頂部+（左導航+右內容）+底部的佈局