网格布局---grid

grid介绍
针对于Web布局而言，Grid布局将是Web布局的神器，他改变了以往任何一种布局方式或者方法。不管以前采用float或者flex弹性布局可以说都是一种一维布局，而Grid的最大特色就是基于网格的二维布局系统，目的是用来优化用户布局界面的设计。

1.启用grid容器
我们使用display属性来定义一个网格容器，他的grid的值决定了容器展现为快级还是内联形式。一旦启用了网格容器，它的所有子元素都进入grid文档流，称为网格子项。

display:grid | inline-grid | subgrid

属性值	说明
grid	定义一个块级的网格容器
inliner-grid	定义一个内联的网格容器
subgrid	定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项
提示：	column、float、clear、和vertical-align对网格容器没有效果

2、网格容器的属性

2.1 grid-template-columns/grid-template-rows
用法：

1.grid-template-columns:<track-size>...|<line-name> <track-size>...;
2.grid-template-rows:<track-size>...|<line-name><track-size>...;

track-size:定义网格单元的宽高，其单位可以是一个长度(如px、em、rem、vw、vh)或百分比，也可以是网格中自由空间的份数(单位为fr)。
line-name:定义网线的名字，它不是必须值。可以选择任意名字，当没有显示设定时，它的名字以数字表示。

实例：
css:

.container{
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-rows: 33% 33% 33%;
            grid-template-columns: 33% 33% 33%;
        }
        .container div{
            border: 1px solid #000;
        }

html:

<div class="container">![在这里插入图片描述](https://img-blog.csdnimg.cn/20191011185347958.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwNjEzMQ==,size_16,color_FFFFFF,t_70)
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

呈现的效果：

也可以通过命名来写效果一样，多个命名的话要用空格隔开

.container{
		grid-template-row[row1-start] 25% [row1-end row2-start] 25% [row2-end];
	}

如果你定义了容器的重复部分，你可以使用repate()方法来生成多个相同值

.container{
		gird-template-columns:repeat(3, 33%);
		/* 等价于*/
.container{
		grid-template-columns:33% 33% 33%
		}

特殊单元：frfr单元允许你将网格容器中的自由空间设置为一个份数：

.container{
		grid-template-columns：repeat(3, 1fr);
		grid-template-row:repeat(3, 1fr);
}

在上面的代码中， 将网格容器的每个子项设置为三分之一。
上边这个平均分成三份比设为33%要好很多，效果图也差不多。
tips:自由空间是在固定子项确定后开始计算的。

2.2 grip-template-areas
grid-template-areas可以配合grid-area定义一个显示的网格区域。 grid-template-areas定义网格区域，然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。
用法:

1.grid-template-areas:"<grid-area-name> | .|none|..." "..."

grid-area-name:在grid-area中指定的网格区域名字
. :一个句点表示一个空的网格单元
none没有网格区域被定义
实例：
css:

.container{
            width: 500px;
            height: 200px;
            margin-top:20px;
            display: grid;
            grid-template-columns:1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-areas: "header header . footer"
                                "main main . sidebar"
                                "main main . sidebar";
        }
        .item-a{
            grid-area: header;
            background-color: black;
        }
        .item-b{
            grid-area: main;
            background-color: blue;
        }
        .item-c{
            grid-area: sidebar;
            background-color: #00bdd4;
        }
        .item-d{
            grid-area: footer;
            background-color: #ffd89b;
        }

html:

<div class="container">
    <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item-c"></div>
    <div class="item-d"></div>
</div>

效果显示

2.3 grid-column-grap/grid-row-gap/grid-gap
指定网格线的大小，也可以说是网格子项之间的间距。用法：

grid-column-grap: <line-size>grid-row-gap:<line-size>

line-size长度值
grid-gap是grid-column-gap和grid-row-gap的简称：

grid-gap:<grid-column-gap> <grid-row-gap>

如果只有一个值，grid-row-gap的值将和grid-column-gap一样。

实例：

css:

.container{
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-columns:repeat(3, 1fr) ;
            grid-template-rows: repeat(3, 1fr);
            grid-column-gap: 2%;
            grid-row-gap: 2%;
        }
        .container div{
            border: 1px solid black;
        }

html:

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

效果呈现：

2.4 justify-items/align-items

justify-items让网格子项的内容和列轴对齐（align-item则相反，是和行轴对齐）,这个值对容器里面的所有网格子项都有用，flex里没有justify-items属性

用法:

justify-items:start | end | center | stretch

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

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

align-items:start | end | center | stretch;

属性值	说明
start	内容和网格区域的顶部对齐
end	内容和网格区域的底部对齐
center	内容和网格区域的中间对齐
stretch	填充整个网格区域的高度（默认值）

2.5 justify-content/align-content
justify-content如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）。

justify-content:start | end | center | stretch | space-around | space-between | space-evenly;

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

align-content如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）。

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

属性值	说明
start	顶部对齐
end	底部对齐
center	居中对齐
stretch	填充网格容器
space-around	在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between	上下对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly	在每个网格子项中间放置均等的空间，包括始末两端

2.6 grid-auto-columns/grid-auto-rows
自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。

grid-auto-columns: <track-size>
grid-auto-rows:<track-size>

track-size：可以是一个长度，百分比或者是一个网格中自由空间的份数（通过使用fr单位）。

为了说明隐式网格轨迹如何被创建，思考一下这个：

.container{
		display:grid;`在这里插入代码片`
		gird-template-columns:60px 60px;![在这里插入图片描述](https://img-blog.csdnimg.cn/20191012191240547.jpg)
		grid-template-rows:90px 90px;
		}

我们创建了一个2*2的网格

但现在想象你使用grid-column和grid-row来定位你的网格子项，就像这样：

.item-a{
		grid-column:1/2;
		grid-row:2/3;
		}
		.item-b{
			grid-column:5/6;
			grid-row:2/3;

我们告诉.item-b在第五列网格线开始第6列网格线结束，但我们还没有定义第5或者第6列。因为我们引用的线不存在，0宽度的隐式网格轨迹将被创建来填充
这些空缺。我们可以使用grid-auto-columns和grid-auto-rows来指定这些隐式网格轨迹的宽度：

.container{![在这里插入图片描述](https://img-blog.csdnimg.cn/20191012192005318.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwNjEzMQ==,size_16,color_FFFFFF,t_70)
		grid-auto-columns:60px;
		}

实例：
CSS:

.container{
		display:gird;
		grid-template-columns:60px 60px;
		grid-template-rows:90px 90px;
		grid-auto-columns:60px;
		}
.item1{
			background:red;
			grid-column:1/2;
			grid-row:2/3;
			}
.item2{
			background:green;
			grid-column:5/6;
			grid-row:2/3;
			}

html:

<div class="container">
	<div class="item1"></div>
	<div class="item2"></div>
</div>

效果图：

2.7 grid-auto-flow

在没有设置网格项的位置时，这个属性控制网格项怎么排列

grid-auto-flow:row | column | row dense | column dense;

属性值	说明
row	按照行一次从左到右排列
column	按照列依此从上到下排列
–	–
dense	按先后顺序排列

实例：
css:grid-auto-flow设为row

.container{
            display: grid;
            grid-template-columns: 200px 200px 200px 200px 200px;
            grid-template-rows: 200px 200px;
            grid-auto-flow:column;
            color:#fff;
        }
        .item1{
            grid-column: 1;
            grid-row:1 / 3;
            background-color: red;
        }
        .item2{
            background-color: blue;
        }
        .item3{
            background-color: black;
        }
        .item4{
            background-color: blueviolet;
        }
        .item5{
            grid-column: 5;
            grid-row:1/3;
            background-color: bisque;
        }

html:

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
</div>

效果展示：

grid-auto-flow设为column

2.8 grid
grid是一种简写形式：

grid:none|<grid-template-rows>|<grid-template-columns>|
<grid-auto-flow> [<grid-auto-row> [<grid-auto-columns>]];

3、网格子项的属性
3.1、grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row
通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的开始位置，grid-column-end、grid-row-end定义网格项的结束位置。

grid-column-start: <number> | <name> | span <number> | span <name> | auto ; 
grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
grid-row-start: <number> | <name> | span <number> | span <name> | auto ;  
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

• number|name:可以是一个数字以适用被标记了数字号的网格线，或者是一个名字以适用命名了的网格线
• span<number>:子项将跨越指定数字的网格轨迹
• span<name>:子项将跨越指定名字之前的网格线
• auto：自动布局，自动跨越或者默认跨越一个
  实例：
  css:

#container{
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

        .item {
            font-size: 4em;
            text-align: center;
            border: 1px solid #e5e4e9;
        }

        .item-1 {
            background-color: #ef342a;
            grid-column-start: 2;
            grid-column-end: 4;
        }

        .item-2 {
            background-color: #f68f26;
        }

        .item-3 {
            background-color: #4ba946;
        }

        .item-4 {
            background-color: #0376c2;
        }

        .item-5 {
            background-color: #c077af;
        }

        .item-6 {
            background-color: #f8d29d;
        }

        .item-7 {
            background-color: #b5a87f;
        }

        .item-8 {
            background-color: #d0e4a9;
        }

        .item-9 {
            background-color: #4dc7ec;
        }

html：

<div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
</div>

呈现效果：

上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。读者可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

上面代码中，左边框和右边框的位置，都指定为网格线的名字。

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

.item-1 {
  grid-column-start: span 2;
}

上面代码表示，1号项目的左边框距离右边框跨越2个网格

这与下面的代码效果完全一样。

.item-1{
	grid-column-end:span 2;
		}

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。

3.2 grid-column属性/grid-row属性
grid-column属性是grid-column-start和grid-column-end的合并简写
grid-row-start属性和grid-row-end的合并简写形式。

.item{
	grid-column: /;
	grid-row: / ;

实例：

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

上面代码中，项目item-1占据第一行，从第一根列线到第三根列线。

这两个属性之中，也可以使用span关键字，表示跨越多少个网格。

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

上面代码中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。

斜杠以及后面的部分可以省略，默认跨越一个网格

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

4.grid-area属性
grid-area属性指定项目放在哪一个区域。

#container{
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas: 'a b c'
            'd e f'
            'g h i';
        }
.item-1{
	grid-area: e;
	}

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-coloumn-end 的合并形式，直接确定项目的位置。

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

实例：

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

效果：