grid网格布局

概念：它将网页划分成n个纵横网格，在布局上属于二维布局，它可以任意组合不同的网格，但所做出的网格要求都是矩形格。网格的细密可以通过横纵数及宽高值来设置。它的使用和flex使用的情况大同小异，属性都分为作用在父元素上的及作用在子元素上的，而设置在父元素上的值，可以针对所以子元素的排列、对齐等样式来设定，指定网格区域的划分、网格大小、网格数目也是在父元素上进行设置。另外，子元素的属性当然就是设置自身的了，下面是详细的说明：

1. 作用在父元素上
   首先我们要是有grid布局时，需要在父容器上使用display:grid这一属性，然后再来指定所需要的网格数(行列数)及行列大小值，行列大小值的设定有许多方放，它可以是固定值，也可以是比例值，亦可以是auto，设置方放不唯一，主要看需要的场景。譬如，下面是一个3*3的网格布局，例子中repeat(3,1fr)，3是重复数，而1fr(fraction 片段)就是把父容器平均分为3份，每一个网格占了一份。其它的行列数及大小的设定，可以参照W3School所列举的例子。

<style>
    *{ margin: 0;padding: 0}
    .parent{height: 300px;width: 300px; display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns:repeat(3,1fr);margin: 50px;color: white;}
    .parent div{ background: red;}
</style>
<div class="parent">
    <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>

从图中我们可以看到，子元素的大小我们并没有设置，但它继承了所在网格的大小，当然我们也可以自定义子元素的大小(宽高)。以上是系统自动为子元素分配位置，当然我们也可以自定义子元素所在网格中的位置，其用到的属性是grid-template-areas，它将所设定的每个网格都自定义一个名字，然后在子元素上设置其位置。除了这些，grid还提供了网格间隙grid-column/row-gap、justify-content/items(轴向整体与部分)、align-content/items(垂轴的整体与部分)。
注：

1. 注：justify-content与justify-items区别？
   justify-content：它是针对子元素整体进行设置的，如果在父元素中划分网格时没有被划分完，那它的设置看起来就起效果了，否则你将其属性值设置为flex-end、center、space-between…则看不出任何效果上的差别。这是因为父元素的空间已经被划分完了，在进行对齐方式设置时，浏览器所显示的效果是一样的。
   上面是父元素的空间没有被网格占满下的justify-content:flex-end;设置的结果。(白色部分为父容器宽300px，单网格宽50px)
   
   上面是父元素的空间被网格占满时的justify-content:flex-end;设置的结果。(白色部分为父容器宽300px，单网格宽100px)，此时设置的justify-content:flex-end;与不设置的效果一样。难道这样设置失效了吗？不是的，因为父元素没有了空白部分，什么start、end、center啦，对content位置的设定是一样的，所以看不出效果的差别。同理也可以理解align-content/items之间的区别。

2. 作用在子元素上的属性
   理解了上面的父元素各自的属性之后，子元素的属性设置便简单了，它的属性有：grid-area找指定的区域、grid-column-start水平方向上占据的起始位置、grid-column-end水平方向上占据的结束位置、grid-row-start垂直方向上占据的起始位置、grid-row-end垂直方向上占据的结束位置、justify-self、 algin-self、place-self。这些属性与父元素属性的差别在于作用对象不一样，一个是针对自身的，一个是针对所以的子元素的。