关于grid介绍参考：http://sm0210.cn/post/940.html

使用CSS Grid 实现左中右三栏布局案例：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title>CSS Grid 布局之左中右三栏布局案例</title>
        <!--
            @author:SM
            @email:sm0210@qq.com
            @desc:CSS Grid 布局之左中右三栏布局案例
         -->
        <!-- 自定义css -->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            /*
                
            */
            .box,
            .content {
                display: grid;
            }
            /*
                
            */
            .box {
                grid-template-rows: 1fr;
                grid-row-gap: 10px;
                color: #fff;
            }
            
            .header {
                height: 100px;
            }
            /*
                
            */
            .content {
                height: 400px;
                grid-template-columns: 120px 1fr 120px;
                grid-column-gap: 10px;
            }
            .footer {
                height: 80px;
            }
            /*
                
            */
            .header,
            .content *,
            .footer {
                background-color: #7AB8ED;
            }
        </style>
    </head>
    <body>
    
        <!-- css grid布局 -->
        <div class="box">
            
            <div class="header">header</div>
            <div class="content">
                <div>nav</div>
                <div>article</div>
                <div>aside</div>
            </div>
            <div class="footer">footer</div>
            
        </div>
        
    </body>
</html>