网格布局, 一种首次突破一维空间的布局思路, 引入 "行" 和 "列" 的概念在二维空间中实现样式效果. 其强大的网页空间分配能力, 是连 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 版本也已做了支持
来源: http://www.jianshu.com/p/cf8baca49c08