grid网格系统布局

grid布局： 基于网格的2维布局方法
1：display: grid | inline-grid | subgrid
作用：启用网格grid容器

grid：定义一个块级的网格容器
inline-grid：定义一个内联的网格容器
subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。

2:网格系统的属性
（1）：grid-template-columns/grid-template-rows
grid-template-columns 列宽(值得个数决定了列数)
grid-template-rows 行高（值得个数决定了行数）
设置方法：

a:
(创建三行三列的网格结构，值也可以设置auto自动分配剩余)
grid-template-columns:33.33% 33.33% 33.33%
grid-template-rows:33.33% 33.33% 33.33%

b:
repeat(3,33.33%)方法设置相同的值
grid-template-columns:repeat(3,33.33%)
grid-template-rows:repeat(3,33.33%)

c:
可以添加名称：
grid-template-columns:[line1] 25% [line2] auto [line3] 25% [line4]
grid-template-rows:[row1] 25% [row2] auto [row3] 25% [row4]

如图

d:
1fr 每个网格所占份数
grid-template-columns:1fr 1fr 1fr
grid-template-rows:1fr 1fr 1fr

（2）：grid-template-areas
作用：grid-template-areas可以配合grid-area定义一个显式的网格区域。grid-template-areas定义网格区域，然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。 .代表一个空的网格单元
例子：

<section>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
</section>

section{
    display:grid;

    background:pink;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:(3,1fr);
    grid-template-areas: "header header header header"
    "nav . . aside"
    "footer footer footer footer"
}

.wrap1{
    grid-area: header;
    background:#f00;
}
.wrap2{
    grid-area: nav;
    background:#dd0;
}
.wrap3{
    grid-area: aside;
    background:#0dd;
}
.wrap4{
    grid-area: footer;
    background:#000;
}

效果如图：

（3）：grid-column-gap/grid-row-gap/grid-gap
作用：指定网格线的大小，也可以说是网格子项之间的间距
grid-gap是grid-column-gap和grid-row-gap的简称

eg:

grid-gap:10px

图示：

（4）：justify-items/align-items

属性值：
start：内容和网格区域的左边对齐
end：内容和网格区域的右边对齐
center：内容和网格区域的中间对齐
stretch：填充整个网格区域的宽度（默认值）

justify-items：让网格子项的内容和列轴对齐
align-items：让网格子项的内容和行轴对齐，这个值对容器里面的所有网格子项都有用

eg:

justify-items: center;
align-items:center;

图示：

（4）justify-content/align-content
属性值

start:左对齐
end：右对齐
center：居中对齐
stretch：填充网格容器
space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly：网格间隔相等，包括始末两端

说明：当网格子项非弹性单位，例如每个格子的宽是px单位，控制网格子项在网格系统里面的对齐方式。

justify-content 列网格线对齐

align-content 行网格线对齐

（5）grid-auto-columns/grid-auto-rows
作用：设置隐式网格轨道的列宽和行高。

隐式网格：当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。
怎么创建隐式网格：接触两个新属性（放在网格元素上） 》
grid-column / grid-row

eg：
grid-column ：2/3 把当前的元素放在第2列网格线开始到第三列网格线之间。
gird-row：1/2 把当前元素放在第1行网格线开始到第2行网格线之间。

代码示例：

<section>
    <div >1</div>
    <div >2</div>
    <div >3</div>
</section>

section{

    background:pink;
    display:grid;
}
div{
    border:1px solid #d00;
}
.con1{
    grid-column: 2/3;
    grid-row: 2/3
}
.con2{
    grid-column: 6/7;
    grid-row: 1/2;
}
.con3{
    grid-column: 6/7;
    grid-row:2/3;
}

注：以上案例则创建了一个2行6列的网格系统。分别把网格内的元素放在网格不同的位置。
（位置：类似几行几列 grid-column控制放在第几列，grid-row控制放在第几行）

grid-auto-columns/grid-auto-rows则是控制自动创建出来的网格的列宽和行高。
eg:

grid-auto-columns: 60px;
grid-auto-rows:100px;

（5）grid-auto-flow:
作用：当网格系统中没有设置网格内的元素固定在某个位置的时候，grid-auto-flow可以自动去排列位置：
属性值：

row  按照行横向进行排列
column 按照列纵向进行排列
row dense 在行内按照元素的先后顺序进行排列
column dense  在列内按照元素的先后顺序排列

eg:

<section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
</section>

div:nth-child(2){
        grid-column:4/5;
        grid-row:2/3;
}

注:给第2个元素设置了位置。其他元素的排列按照grid-auto-flow设置进行排列。

（6）：justify-self/align-self

和justify-items/align-items的作用一样。区别：justify-items/align-items控制的是整个网格系统内的所用元素的对齐方式。而justify-self/align-self则是添加在网格系统中的某一个元素上面，仅对当前的元素起作用。