Grid布局
一. Grid布局的介绍
网格布局(Grid)是最强大的CSS布局方案
它将网页划分成一个个网格, 可以任意组合不同的网格, 做出各种各样的布局.
Grid布局与Flex布局有一定的相似性, 都可以指定容器内部多个项目的位置. 但是它们也存在着重大的区别.
- Flex布局是轴线布局, 只能指定"项目"针对轴线的位置, 可以看作是一维布局.
- Grid布局则是将容器划分成"行"和"列", 产生单元格, 然后指定"项目所在"的单元格, 可以看作是二维布局
在学习Grid布局之前, 会涉及到几个基本概念, 首先是容器和项目, 然后是行和列, 再之是单元格, 最后是网格线, 由于这些概念比较简单, 这里不展开陈述.
二. container属性介绍
2.1 display: grid/inline-grid属性
第一个属性是设置容器为grid布局, 通过display: grid来进行设置, 默认情况下设置了grid属性值后, 容器元素是块级元素, 但容器元素也可以设置为行内元素, 通过设置display: inline-grid来进行设置
注意: *设置为网格布局以后, 容器子元素(项目)的float, display: inline-block, display: table-cell, vertical-align和column-等设置都将失效
2.2 grid-template-columns/grid-template-rows
容器指定了网格布局以后, 接着就要划分行和列.
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属性对于网页布局非常有用
- 二栏式布局
- 十二网格布局
2.3 grid-row-gap/grid-column-gap/grid-gap属性
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
2.4 grid-template-areas
网格布局允许指定"区域", 一个区域由单个或多个单元格组成. 而grid-template-areas属性便是用来指定区域
注意, 区域的命名会影响到网格线. 每个区域的起始网格线, 会自动命名为区域名-start, 终止网格线会自动命名为区域名-end
下面为常见的该属性的使用示例
-
上面的代码先划分为9个单元格, 然后将其定名为a到i的九个区域, 分别对应这九个单元格
-
多个单元格合并成一个区域的写法
上面代码将9个区域划分为a, b, c三个区域
-
如果某些区域不需要利用, 则使用'点(.)'表示
上面代码中, 中间一列为点, 表示没有用到该单元格, 或者该单元格不属于任何区域
-
常见的布局示例
上面代码中, 顶部是页眉区域header, 底部是页脚区域footer, 中间部分则为main和aside和一个不会使用到的单元格
3.5 grid-auto-flow
划分网格以后, 容器的子元素会按照顺序, 自动放置在每一个网格.
默认的放置顺序似乎"先行后列", 即先填满第一行, 再开始放入第二行, 即下图数字的顺序.
这个顺序有grid-auto-flow属性来决定, 它控制着自动布局算法怎样运作, 精确指定在网格中被自动布局的元素怎样排列.
- row(默认值) 即为"先行后列"
- column 变为了"先列后行"
- dense 该关键字指定自动布局算法使用一种"稠密"的堆积算法, 也就是说它会试图去填充网格中前面留下的空白(这样做会填上稍大元素留下的空白, 但同时也可能导致原来出现的次序被打乱)
- row dense 优先在行上使用稠密堆积算法
- column dense 优先在列上使用稠密堆积算法
3.6 justify-items/align-items/place-items(设置单元格内的内容)
justify-items 属性设置单元格内容的水平位置(左中右)
align-items 属性设置单元格内容的垂直位置(上中下)
place-items 属性是上面这两个属性的合并简写形式:
注: 如果省略第二个值, 则浏览器认为与第一个值相等
上面属性的属性取值
- start 对齐单元格的起始边缘
- end 对齐单元格的结束边缘
- center 单元格内部居中
- stretch 拉伸, 占满单元格的整个宽度(默认值)
3.7 justify-content/align-content/place-content
justify-content属性是整个内容区域在容器里面的水平位置(左中右)
align-content属性是整个内容区域的垂直位置(上中下)
place-content属性是上面两个属性的合并简写属性:
上面属性的取值:
- start 对齐容器的起始边框(默认情况)
- end 对齐容器的结束边框
- center 容器内部居中
- stretch 项目大小没有指定时, 拉伸占据整个网格容器
- space-around 每个项目两侧的间隔相等. 因此, 项目之间的间隔比项目与容器边框的间隔大一倍
- space-between 项目与项目的间隔相等, 项目与容器边框之间没有间隔
- space-evenly 项目与项目的间隔相等, 项目与容器边框之间也是同样长度的间隔
3.8 grid-auto-columns/grid-auto-rows
场景: 一些项目的指定位置, 在现有网格的外部. 比如网格只有3行, 但是某一个项目指定在第5行. 这时, 浏览器会自动生成多余的网格, 以便放置项目.
grid-auto-columns属性和grid-auto-rows属性用来设置, 浏览器自动创建的多余网格的列宽和行高.
它们的语法规范与grid-template-columns/grid-template-rows完全相同
如果不指定这两个属性, 浏览器完全根据单元格内容的大小, 决定新增网格的列宽和行高
3.9 grid-template/grid
grid-template属性是grid-template-rows, grid-template-columns和grid-template-areas三个属性的合并简写形式
grid属性是grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns grid-auto-flow这六个属性的合并简写形式.
在实际的开发过程中, 不建议使用合并属性.
三. items属性介绍
3.1 grid-column-start/grid-column-end grid-row-start/grid-row-end
在container中, items的位置是可以指定的, 具体的指定方法就是指定项目的四个边框, 分别定位在哪根网格线
- grid-column-start: 左边框所在的垂直网格线
- grid-column-end: 有边框所在的垂直网格线
- grid-row-start: 上边框所在的水平网格线
- grid-row-end: 下边框所在的水平网格线
注意, 这些属性的属性值通常情况下来说为数字, 但也可以指定为网格线的名字, (这里通常和grid-template-areas属性结合使用)
另外, 这四个属性的值还可以使用span关键字, 表示跨越, 即左右边框(上下边框)之间跨越多少个网格
另外, 使用这四个属性, 如果产生了项目的重叠, 则可以使用z-index属性指定项目的重叠顺序
上面的代码指定了, 1号项目的左边框是第二根垂直网格线, 右边框是第四根垂直网格线. 并且, 只指定了1号项目的左右边框, 没有指定上下边框, 因此上下边框会采用默认位置, 即上边框是第一根水平网格线, 下边框是第二根水平网格线.
另外, 除了一号项目外, 其他项目都没有指定位置, 由浏览器自动布局, 这时它们的位置由容器的grid-auto-flow属性决定
下面的实例为指定item-1四个边框位置的示例
这里的代码效果和 grid-column-end: span 2 是一样的
3.2 grid-column/grid-row
grid-column属性是上面的grid-column-start和grid-column-end属性的合并简写形式
grid-row属性是上面的grid-row-start和grid-row-end属性的合并简写形式
grid-column: /
grid-row: /
当然也可以使用span关键字表示跨越多少个网格
斜杠以及后面的部分可以省略, 默认跨越一个网格
3.3 grid-area
grid-area属性指定项目放在哪一个区域, 通常可以和grid-template-areas结合使用
另外, grid-area属性还可以用过grid-row-start, grid-column-start, grid-row-end, grid-column-end的合并简写形式, 直接指定项目的位置
3.4 justify-self/align-self/place-self
justify-self属性设置单元格内容的水平位置(左中右), 跟justify-items属性用法完全一致, 但只作用域单个项目
align-self属性设置单元格内容的垂直距离(上中下), 跟align-items属性的作用完全一致, 也是只作用于单个项目
place-self属性是上面两个属性的合并简写属性: