定义
CSS网格图是一个用以web二维合理布局系统软件。运用系统软件，我们可以把具体内容依照行与列格式开展排版设计。此外，网格图还可以比较轻松地完成一些繁杂的规划
运用网格布局能够轻松地开展单元格合并、方格与格子间的间隔
grid器皿
grid子项目
界定网格图及fr企业
界定网格图有些像Excel网格图，有行有列。实际需要用到的是grid-template-rows和grid-template-columns ，它们的意思都是基于网格图行和列的层面，去界定网格图的名字和网格图轨道的尺寸比例
grid-template-columns:界定网格图有多少个列,企业能是px、百分数、auto、fr混合使用
grid-template-columns：界定网格图是多少行,企业能是px、百分数、auto、fr混合使用
fr企业同flex合理布局里的flex-grow扩展器皿和flex-shrik收拢器皿特别像，都是一个比例值,fr的意思是"平均分"
grid-template-rows: 2fr 1fr;的意思是第一行高度是第二行极高的2倍
grid-template-rows: 0.3fr 0.3fr; 它值总和务必高于或等于1，不然就会发生空缺地区，如图所示就容易出现40%的空白地区
实例1
合拼网格图及网格取名
实例2
grid合理布局中的一个特点，如果要特定了好几个div中的一个与网格线的相互关系，那样其它的div仍旧会全自动填写到gid网格图的许多网格图中，不容易跑进网格图以外
实例3
缩写方法
实例4
网格图空隙及缩写
最初这种特性只用在grid布局中，全部添加了grid作为前缀，后边发觉别的合理布局之中能是用到空隙，为了实现通用性效果去除了grid，例如flex布局中也可以用界定空隙的样式
实例5
缩写款式grid-gap: 行距 列间隔;,真的记不住哪一个是行哪个是列也无所谓，电脑浏览器中可以看一下缩写的进行书写，一个新的书写grid: 20px 30px;
flex弹力布局中应用间隔gap
实例6
网格图对齐方式及缩写
默认设置前提下div是依靠格子左上方两端对齐
justify-items 是指子项目在自身所在表格中垂直方向的对齐方式
align-items 是指子项目在自身所在表格中垂直方向的对齐方式
这类适宜子项目低于表格中时的对齐方式
缩写方式：place-items: 竖直方向 垂直方向; (记不得没事儿，电脑浏览器中可以看一下完整的方式)
实例7
它是指整体上的对齐方式，全部网格图在grid里的对齐方式(前提条件是器皿会比表格中要大一些)
默认设置前提下表格中位于容器左上方
justify-content 是指表格中总体在垂直方向的对齐方式
align-items 是指表格中总体在垂直方向的对齐方式
这类适宜子表格中低于grid容器情况下
缩写方式：place-content: 竖直方向 垂直方向; (记不得没事儿，电脑浏览器中可以看一下完整的方式)
实例8
隐式网格图和表明网格图
自适应的行开展排序
以前的事例全是表明网格图，即一共有多少个grid方格就一共有多少个表格中，是一一对应之间的关系
有些时候网格图其实比表格中少，这样的事情就容易出现隐式网格图
上图中重新定义了1行3列3个grid方格，但又重新定义了5个表格中，因而网格图比表格中少。1,2,3占用的是表明网格图，4,5多出的便会按序全自动拉申排序，它占用的是隐式网格图(一键生成)，隐式网格图的初始款式:
grid-auto-flow：row：默认设置row便是行造成隐式网格图，因而多出的4,5会折行至下边，总宽同表明网格图一样，可是相对高度是拉申的
这一隐式网格图高度是可以进行调节 grid-auto-rows: 100px;
绝大多数情况下这2个款式是搭配使用的
grid-auto-flow：row
grid-auto-rows: 100px;
示 例 9
自适应的列开展排序
假如是1列3行，下图中的4,5怎么会没有在竖直方向上折行？4,5也会带来隐式网格图，仅仅默认设置前提下是引起row的隐式网格图 grid-auto-flow：row
这个时候就需要对列造成隐式网格图grid-auto-flow：column
可是掩藏网格图里的表格中宽度默认设置是拉设置的，我们能并对设定
grid-auto-columns: 100px;
绝大多数情况下这2个款式是搭配使用的
grid-auto-flow：column
grid-auto-columns: 100px;
示 例 10
假如不设定grid容器总宽，那样总宽高度全是自适应的，调整具体内容，那样列会全自动产生调整还会把grid器皿展开，但是用grid合理布局非常容易完成响应式列合理布局
密切的合理布局
默认设置前提下一行三列的规划：
特定第一个div，从第二个列逐渐排序，那样第一个部位便会被空出来
再加上密切的特性后，后边的div并非依照次序添充，反而是先将空部位粘满
grid-auto-flow: row dense;
实例11
Grid氢核项的有关词法
根据线原素摆放
在grid布局中每一条线都是有名称，根据特定div在grid网格图中国银行/列开始、完毕细线就能使div放进指定方格中
实例12
加和不加下边2行款式的差别(同上面说的『密切的』相近)：
grid-row-start: 1; grid-row-end: 2;
- 不用时默认排序是auto，深灰色div就会自动排在粉红色div后边
- 添加了以后深灰色div会填充空缺地区，“跑进”粉红色div最前面
实例13
再加上span后数据也不表明占有位置，反而是表明占有的数量grid-column-end: span 2; 它表明占2列
实例14
边框线除开应用数据来命名，还能够自定取名
在界定网格图时是能控制命名，根据"[]"
实例15
缩写
根据线grid-area
grid-area:行开始线 / 列开始线 / 行完毕定位线 / 列完毕定位线
除了能根据特定某一地区的名称加以控制之外，也可以通过线的形式进行操纵
实例16
子项目的对齐方式(特定实际操作某一个子项目)
justify-self:垂直方向对齐方式
align-sellf:竖直方向对齐方式
下边的事例里的div怎么会在边框线中间呢？由于其所占据区域是2行一列，在这样一个区域中水准居中
实例17
repeat()
repeat()方式及auto-fill可给值(响应式)，特定可重复性的值
grid-template-columns: 100px 100px 100px;
// 相当于下边这类书写
grid-template-columns:repeat(3,100px)
auto-fill是grid-template-columns属性值，就会自动的依据器皿尺寸应当造成几个网格图,假如重新定义了一行3列网格图，复位了4个div，那样第四个div便会先后折行排序可自动放大
可是采用了auto-fill后网格图会依据容器总宽响应式形成多个网格图，这样就算复位的方格减少了，格子数量会根据具体内容自动调整
实例18
minmax()
minmax()方式，设定最少和较大的范畴
如图所示，伴随着窗口大小产生变化，那样div2最少不容易低于100px,较大便会布满可用空间
实例19
应用网格布局，融合minmax()和repeat()做一个响应式合理布局的案例
实例20
累加合理布局
构思 =>
- 让累加元素出现在了一个方格中
grid-area: 1/1/1/1;
- 对于需要指定地点元素应用自对齐方式
justify-self: end;
align-self: end;
实例21
多种多样组合排列合理布局
构思：
- 特定总体两行几列网格图、网格图尺寸及距离
- 根据线特定某一表格中位置和占有的方格尺寸
如图所示：
实例22
栅格数据合理布局
实例23
当某一divgrid-area: 1;数值设为一个具体值后，假如后面有div那样他就不容易全自动按序开展排序反而是全自动填补空缺地区，因而这儿设定grid-area: auto / auto / auto / span 1 ;
如同下边那样，大家具体期待col-3是排到col-1后边,但由于col-1最前面还有很多空缺地区因而col-3就自动弥补到前边来到，为了防止这类现象的发生，使其可以响应式合理布局，我们应该置grid-area: auto / auto / auto / span 1 ;开始和终止部位全是auto，占有一个方格
器皿响应式队伍合理布局
器皿响应式行合理布局
即便之后再加上更多div，容器相对高度也可以伴随着具体内容全自动被展开
实例24
器皿响应式列合理布局
实例25
行响应式合理布局不用写grid-auto-flow: row; 由于不会写得话默认设置便是行折行，造成行隐式网格图。可是列这折行这儿那就需要特定方向了，grid-auto-flow: column;
实例1
实例26
-
这儿用命名方法划分网格图地区比应用根据线方法划分网格图地区方便快捷
-
应用
grid-template-areas划分网格区域内的情况下，命名地区所组成的图型一定要方形
grid-template-areas:
"
a1 a3 a3
a2 a3 a3
a4 a4 a5
a6 a7 a7
"
- 构思:
- 1.特定网格图行列数并区划好地区
- 2.将子项目放进相对应的网格图中