CSS3网格布局

最近在复习CSS3，所以就看到了网格布局，Grid，便学习了一下。首先，本文章借鉴了阮一峰大神的博客：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html，以及风雨后见彩虹的博客：https://www.cnblogs.com/moqiutao/p/8682142.html，模仿Windows10，win键的布局，并整理了一下，以下是网页效果图及源码：

效果图1

css部分

.wrapper {
                width: 1000px;
                height: 600px;
                display: grid;
                /*grid-template-columns: 1fr 100px 100px;
                grid-template-rows: 1fr 100px 100px;*/
                grid-gap: 5px 5px;
            }
            
            .wrapper div {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                font-size: 16px;
                color: #fff;
            }
            
            .wrapper div:nth-child(1) {
                background-color: #ef3429;
                grid-column-start: 1;
                grid-column-end: 3;
            }
            
            .wrapper div:nth-child(2) {
                background-color: #f68f25;
            }
            
            .wrapper div:nth-child(3) {
                background-color: #4ba846;
                grid-row-start: 2;
                grid-row-end: 4;
            }
            
            .wrapper div:nth-child(4) {
                background-color: #0476c2;
                grid-column-start: 2;
                grid-column-end: 4;
            }
            
            .wrapper div:nth-child(5) {
                background-color: #c077af;
            }
            
            .wrapper div:nth-child(6) {
                background-color: #f8d29d;
            }
            
            .wrapper div:nth-child(7) {
                background-color: #b4a87f;
            }
            
            .wrapper div:nth-child(8) {
                background-color: #d0e4a8;
            }
            
            .wrapper div:nth-child(9) {
                background-color: #4dc7ec;
            }

html部分

<div class="wrapper">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>

效果图2

css部分

            .container {
                width: 1000px;
                display: grid;
                grid-gap: 5px;
                grid-template-columns: repeat(12, 1fr);
                grid-template-rows: 50px 350px 50px;
                grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f";
            }
            
            .header {
                grid-area: h;
                background-color: #5cb85c;
            }
            
            .menu {
                grid-area: m;
                background-color: #5bc0de;
            }
            
            .content {
                grid-area: c;
                background-color: #f0ad4e;
            }
            
            .footer {
                grid-area: f;
                background-color: #d9534f;
            }

html部分

        <div class="container">
            <div class="header">HEADER</div>
            <div class="menu">MENU</div>
            <div class="content">CONTENT</div>
            <div class="footer">FOOTER</div>
        </div>