css grid页面骨架布局

       * {
　　　　　　  margin: 0;
　　　　　　　padding: 0;
　　　　　 }

        html,
        body,
        .container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .container {
            display: grid; /* 开启grid布局 */
            grid-template-columns: 1fr repeat(3, 3fr); /* 4列 */
            grid-template-rows: 1fr 12fr 1fr; /* 3行 */
            /* 定义区域 */
            grid-template-areas: "header header header header"
                                 "aside main main main"
                                 "footer footer footer footer";
        }
        
        header {
            background: skyblue;
            grid-area: header;
        }
        
        aside {
            background: slateblue;
            grid-area: aside;
        }
        
        main {
            background: orchid;
            grid-area: main;
        }
        
        footer {
            background: salmon;
            grid-area: footer;
        }

<div class="container">
    <header>header</header>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
</div>

为之则易，不为则难。