Grid布局

一. Grid布局的介绍

网格布局(Grid)是最强大的CSS布局方案

它将网页划分成一个个网格, 可以任意组合不同的网格, 做出各种各样的布局.

Grid布局与Flex布局有一定的相似性, 都可以指定容器内部多个项目的位置. 但是它们也存在着重大的区别.

在学习Grid布局之前, 会涉及到几个基本概念, 首先是容器和项目, 然后是行和列, 再之是单元格, 最后是网格线, 由于这些概念比较简单, 这里不展开陈述.

第一个属性是设置容器为grid布局, 通过display: grid来进行设置, 默认情况下设置了grid属性值后, 容器元素是块级元素, 但容器元素也可以设置为行内元素, 通过设置display: inline-grid来进行设置

注意: *设置为网格布局以后, 容器子元素(项目)的float, display: inline-block, display: table-cell, vertical-align和column-等设置都将失效

容器指定了网格布局以后, 接着就要划分行和列.

grid-template-columns属性定义每一列的列宽,

grid-template-rows属性定义每一行的行高

注: 每个单元格的border是包含在这两个属性之中的

属性值介绍

首先是绝对单位如50px, 也可以使用百分比单位如 33.33%(注意, 这里的百分比单位是相对于网格容器来说的)
repeat()函数, 这个函数接收两个参数, 第一个参数是重复的次数, 第二个参数是所要重复的值, 因此可以使用这个函数来避免重复书写多个同样的值

另外repeat()函数也可以重复某种模式, 此时可以接收多个参数, 同样地, 第一个参数是重复的次数, 后面的参数是某种模式的参数
auto-fill关键字, 有时候, 单元格的大小是固定的, 但是容器的大小不确定. 如果希望每一行(或每一列)容纳尽可能多的单元格, 这时可以使用auto-fill关键字表示自动填充
fr关键字. 为了方便表示比例关系, 网格布局提供了fr关键字(fraction的缩写, 意为"片段"). 如果两列的宽度分别为1fr和2fr, 就表示后者是前者的两倍; 另外, fr关键字也可以和绝对长度的单位结合使用, 这时会非常方便

minmax()函数产生一个长度范围, 表示长度就在这个范围之中. 它接收两个参数, 分别为最小值和最大值.

grid-template-columns: 1fr 1fr minmax(100px, 1fr) 它表示列宽不小于100px, 不大于1fr.
auto关键字表示由浏览器自己决定长度

grid-template-columns: 100px auto 100px 这句代码中, 第二列的宽度, 基本上等于
网格线的名称 grid-template-columns属性和grid-template-rows属性里面, 还可以使用方括号, 指定每一根网络线的名字, 方便以后的引用

上面代码指定网格布局为3行x3列, 因此有4根水平网格线. 方括号里面依次是这八根线的名字.

网格布局允许同一根线有多个名字, 比如[fifth-line row-5]

布局实例

grid-template-columns属性对于网页布局非常有用

grid-column-gap 属性设置列与列的间隔(列间隔)

grid-row-gap 属性设置行与行的间隔(行间隔)

grid-gap属性是上面两个属性的简写

grid-gap:

如果grid-gap省略了第二个值, 浏览器认为第二个值等于第一个值

一般这三个属性值为绝对值像素

注: 根据最新标准, 上面三个属性名的grid-前缀已经删除, grid-column-gap和grid-row-gap可以写成column-gap和row-gap,

grid-gap写成gap

网格布局允许指定"区域", 一个区域由单个或多个单元格组成. 而grid-template-areas属性便是用来指定区域

注意, 区域的命名会影响到网格线. 每个区域的起始网格线, 会自动命名为区域名-start, 终止网格线会自动命名为区域名-end

下面为常见的该属性的使用示例

划分网格以后, 容器的子元素会按照顺序, 自动放置在每一个网格.

默认的放置顺序似乎"先行后列", 即先填满第一行, 再开始放入第二行, 即下图数字的顺序.

这个顺序有grid-auto-flow属性来决定, 它控制着自动布局算法怎样运作, 精确指定在网格中被自动布局的元素怎样排列.

row(默认值) 即为"先行后列"
column 变为了"先列后行"
dense 该关键字指定自动布局算法使用一种"稠密"的堆积算法, 也就是说它会试图去填充网格中前面留下的空白(这样做会填上稍大元素留下的空白, 但同时也可能导致原来出现的次序被打乱)
row dense 优先在行上使用稠密堆积算法
column dense 优先在列上使用稠密堆积算法