CSS趋势：网格布局Grid

2019-10-18 本文已影响0人果汁凉茶丶

网格布局，一种突破一维空间的布局思路，引入“行”和“列”的概念在二维空间中实现样式效果。其强大的网页空间分配能力，是连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 版本也已做了支持