网格布局，一种突破一维空间的布局思路，引入“行”和“列”的概念在二维空间中实现样式效果。其强大的网页空间分配能力，是连Flex在内的所有布局方式都未有过的。它与Flex具有一定的相似性，都可以指定容器内多个项目的位置，但又有很大的不同。可以认为，Grid 远比 “Flex” 强大。
类似上图的网页布局模型，是Grid布局的拿手好戏。图中对应的名称，在网格布局中被称作“区域名”。本文偏干货，想查看更多使用案例，可阅读Learn CSS Grid一文
# 概念须知
- 容器：承载网格布局的那个空间，用来存放网格布局的子元素。一般最外层的容器是网页的Container
-
项目：存在容器中的直接子元素，称为“项目”。但间接子元素不是项目，
Grid布局也不会对其生效。如需要生效，需要将该项目也设置为容器display: grid - 单元格：行和列交叉的空间，称为单元格。一个容器会被划分出多个单元格，一个项目可占用一个或多个单元格
- 区域：可以对单元格指定名字，构成区域。允许指定多个单元格相同名字，构成一个区域。通常一个项目占用一个区域，但也不绝对。
-
网格线：分割出单元格的行列线条，称为网格线。
n行有n+1根水平网格线，m列有m+1根垂直网格线。网格线下标从1开始（不从0开始）
网格布局属性设置有两大类:（1）容器属性 （2）项目属性。
设置网格布局后，以下几个CSS属性将失效：float，display: inline-block，display: table-cell，vertical-align，column-*
# 容器属性字典
一、设置容器为网格布局
网格布局方法中，容器内部的项目默认是block类型的，如果需要展示为行内块级元素，可以设置为inline-grid
-
display:
（1）grid默认子元素是块级元素
（2）inline-grid设置子元素是行内块级元素
二、划分单元格及设置大小
-
grid-template-columns:
（1）100px 100px 100px定义每一列宽度
（2）repeat(3, 100px)循环定义三次100px、repeat(2, 100px 50px)循环100px 50px两次
（3）repeat(auto-fill, 100px)自动填100px的单元格，放不下自动换行
（4）1fr 2fr 100px倍数关系，2列是1列的两倍宽。3列固定为100px宽
（5）1fr 2fr minmax(50px, 1fr)第3列最窄50px，最宽1fr
（6）100px auto 50px除去1列和3列占的宽度，第2列自适应占用剩余宽度
（7）70% 30%两列布局模型，repeat(24, 1fr)ElementUI十二个布局模型
（8）[col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]使用[]给网列网格线命名 -
grid-template-rows:
（1）[row-1-start] 1fr [row-2-start] 1fr [row-2-end]给列网格线命名
（2）...同上...
(8) 与 (1) 的组合效果
三、给单元格分区域
同行命名的区域名中间以空格隔开，而不是逗号，点号表示跳过该单元格也就是不对该单元格命名区域。
值得关注的是，区域命名后，每个区域的起始网格线会自动命名为区域名-start，结束为区域名-end。水平网格线和垂直网格线具有相同的名称
-
grid-template-areas:
（1）'a b c'
'd e f'
'g h i'指定区域名称，为直观展示允许换行书写
（2）'a b c' 'd . e' 'f . g'不使用的单元格使用点号 跳过
（3）'header header header header' 'main main . asidebar' 'footer footer footer footer'划多个单元格为一个区域
(3) 的分区效果
四、设置项目间距
-
row-gap:20px[grid-row-gap] 新标准，设置上下行项目间隔 -
column-gap:20px[grid-column-gap] 新标准，设置左右列项目间隔 -
gap:<row-gap> <column-gap>简写。[grid-gap] 新标准
（1）20px 20px上下间隔20px，左右间隔20px
（2）20px上下左右间隔20px
五、优先排列方向
-
grid-auto-flow:
（1）row(默认)，优先横向排列
（2）column，优先纵向排列
（3）row dense稠密布局，除已指定区域的项目，其余项目优先横向自动占用未用的单元格
（4）column dense优先纵向的稠密布局
(3) 的效果。否则因1后放不下2图中3位置将留空
六、设置自动生成的单元格大小
有时候因布局需要，会空出某个单元格不用，如第一个项目需要显示在第一行第二列单元格上，如果单元格数量与项目数量相同，就会剩余一个项目超出自动排列到最后一行。网格布局会自动再生成一个单元格来放这个项目。
-
grid-auto-columns:100px设置自动生成的单元格宽度为100px -
grid-auto-rows:100px设置自动生成的单元格高度为100px
七、容器内容的对齐方式
相对于display: grid的容器，其内部元素作为一个整体相对于这个容器的对齐方式
-
justify-content:
（1）start以起始网格线对齐
（2）end以结束网格线对齐
（3）center居中显示
（4）stretch项目拉伸至单元格同宽
（5）space-between两边顶边，项目间距均分
（6）space-around项目两侧间距相等（距边距离是项目间的1/2）
（7）space-evenly距边与项目间距相等的间距均分
（8）...其余属性不常用... -
align-content:
（1）...同上...
(6) 的显示效果
八、单元格内容对齐方式
容器中有一个或多个单元格，单元格内部存放着项目，这些项目相对于单元格的对齐方式
-
justify-items:
（1）start项目以单元格的起始网格线对齐
（2）end以结束网格线对齐
（3）center项目在单元格中居中显示
（4）stretch项目拉伸占满单元格宽度
（5）...其余属性不常用... -
align-items:
（1）...同上...
(1) 的显示效果
九、终极简写
这个简写并不容易理解和维护，不推荐使用
-
grid-template:
是<grid-template-columns> <grid-template-rows> <grid-template-areas>的简写 -
grid:
是<grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns>的简写
# 项目属性字典
一、项目内容对齐方式
容器内容对齐方式是justify-content，单元格内容对齐方式是justify-items，项目内容指的是在项目内部的元素，相对于该项目的对齐方式。所以本属性只会影响单个项目。前两个属性都会影响所有项目。
-
justify-self:
（1）start项目内容以项目起始位置对齐
（2）end项目内容在项目结束位置对齐
（3）center项目内容居中显示
（4）stretch内容拉伸占满项目宽度 -
align-self:
（1）...同上...
(2) 的显示效果
二、设置项目占用空间
本属性中，如果把一下四个网格线均设置了，其余未指定区域自动排列的项目会根据dense的规则自动进行稠密布局。
-
grid-column-start:
（1）1开始网格线的下标（注意网格线下标从1开始，而不是0）
（2）header-start开始网格线名称
（3）span 3按默认的开始位置，跨两个单元格大小 -
grid-column-end:
（1）4结束网格线的下标（注意网格线下标从1开始，而不是0）
（2）header-end结束网格线名称
（3）span 3按默认的开始位置，跨两个单元格大小 -
grid-row-start:同 grid-column-start -
grid-row-end:同 grid-column-end
简写办法
-
grid-column:<grid-column-start> <grid-column-end>简写，用/分隔
（1）1 / 4从第一条网格线到第三条网格线，即占用第一和第二单元格
（2）1 / span 3从第一条网格线开始，占用两个单元格
（3）1从第一条网格线开始，占用一个单元格。相当于省略了span 1 -
grid-row
（1）1 / 3从第一条到第三条
（2）1 / span 2从1开始跨两格
(1) / (2) 的显示效果
# 浏览器支持情况
作为比较新的技术方案，肯定会担心支持性的问题，好在它已被广泛的接受，某E 11 版本也已做了支持
网友评论