10.介绍一下CSS中的Grid网格布局?

一、是什么

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列

擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

这与之前讲到的flex一维布局不相同

设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法

<div class="container">
    <div class="item item-1">
        <p class="sub-item"></p>
 </div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div> 

上述代码实例中，.container元素就是网格布局容器，.item元素就是网格的项目，由于网格元素只能是容器的顶层子元素，所以p元素并不是网格元素

这里提一下，网格线概念，有助于下面对grid-column系列属性的理解

网格线，即划分网格的线，如下图所示：

上图是一个 2 x 3 的网格，共有3根水平网格线和4根垂直网格线

二、属性

同样，Grid 布局属性可以分为两大类：

• 容器属性，

• 项目属性

关于容器属性有如下：

display 属性

文章开头讲到，在元素上设置display：grid 或 display：inline-grid 来创建一个网格容器

• display：grid 则该容器是一个块级元素

• display: inline-grid 则容器元素为行内元素

grid-template-columns 属性，grid-template-rows 属性

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高

.wrapper {
  display