CSS Grid 网格布局网页布局（layout）是CSS的一个重点应用，一提到CSS的布局可能大多数人第一个想到的就是

网页布局（layout）是CSS的一个重点应用，一提到CSS的布局可能大多数人第一个想到的就是Flex布局，但我们今天要讲的是CSS的另一种布局Grid布局，Grid布局远比 Flex布局强大。(不过存在一些兼容姓问题，使用时看一下具体需求)

什么是Grid布局?

Grid布局即网格布局，是一种新的 CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，而Grid则是将容器分为行和列，形成单元格，然后去指定对应的单元格，是目前唯一一种 CSS 二维布局。

基本展示

HTML部分

<body>
    <div class="grid-container">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
        <div class="item5">item5</div>
        <div class="item6">item6</div>
        <div class="item7">item7</div>
    </div>
</body>

CSS部分

<style>
        *{
            margin: 0;
            padding: 0;
        }

        .grid-container{
            width: 100vw;
            height: 500px;
            background: palegreen;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-gap: 10px;
            grid-template-areas: 'a a b b'
                                 'a a c c';
        }

        .item1{
            background: pink;
            grid-area: a;
        }
        .item2{
            background: aqua;
            grid-area: b;
        }
        .item3{
            background: gold;
            grid-area: c;
        }

        .item4{
            background: aquamarine;
        }

        .item5{
            background: bisque;
        }

        .item6{
            background: burlywood;
        }

        .item7{
            background: coral;
        }
    </style>

相对于Flex布局来说Grid可以完成些比较复杂的布局样式，Grid就像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。

定义和用法

grid 属性是以下属性的简写属性：

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow