Grid 栅栏布局

1,902 阅读10分钟

Grid布局

一. Grid布局的介绍

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

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

image-20211122223856077.png

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-等设置都将失效

image-20211123093223292.png

2.2 grid-template-columns/grid-template-rows

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

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

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

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

image-20211123095407832.png

属性值介绍

  • 首先是绝对单位如50px, 也可以使用百分比单位如 33.33%(注意, 这里的百分比单位是相对于网格容器来说的)

  • repeat()函数, 这个函数接收两个参数, 第一个参数是重复的次数, 第二个参数是所要重复的值, 因此可以使用这个函数来避免重复书写多个同样的值

    另外repeat()函数也可以重复某种模式, 此时可以接收多个参数, 同样地, 第一个参数是重复的次数, 后面的参数是某种模式的参数

  • auto-fill关键字, 有时候, 单元格的大小是固定的, 但是容器的大小不确定. 如果希望每一行(或每一列)容纳尽可能多的单元格, 这时可以使用auto-fill关键字表示自动填充

  • fr关键字. 为了方便表示比例关系, 网格布局提供了fr关键字(fraction的缩写, 意为"片段"). 如果两列的宽度分别为1fr和2fr, 就表示后者是前者的两倍; 另外, fr关键字也可以和绝对长度的单位结合使用, 这时会非常方便

image-20211123113540314.png

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

    grid-template-columns: 1fr 1fr minmax(100px, 1fr) 它表示列宽不小于100px, 不大于1fr.

  • auto关键字 表示由浏览器自己决定长度

    grid-template-columns: 100px auto 100px 这句代码中, 第二列的宽度, 基本上等于

  • 网格线的名称 grid-template-columns属性和grid-template-rows属性里面, 还可以使用方括号, 指定每一根网络线的名字, 方便以后的引用

image-20211123164015801.png

上面代码指定网格布局为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

image-20211124091727417.png

2.4 grid-template-areas

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

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

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

  • image-20211124112053332.png

    上面的代码先划分为9个单元格, 然后将其定名为a到i的九个区域, 分别对应这九个单元格

  • 多个单元格合并成一个区域的写法

    image-20211124110906401.png

    上面代码将9个区域划分为a, b, c三个区域

  • 如果某些区域不需要利用, 则使用'点(.)'表示

    image-20211124160314925.png

    上面代码中, 中间一列为点, 表示没有用到该单元格, 或者该单元格不属于任何区域

  • 常见的布局示例

    image-20211124160534859.png

    上面代码中, 顶部是页眉区域header, 底部是页脚区域footer, 中间部分则为main和aside和一个不会使用到的单元格

3.5 grid-auto-flow

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

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

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

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

image-20211124205754810.png

image-20211124210337444.png

3.6 justify-items/align-items/place-items(设置单元格内的内容)

justify-items 属性设置单元格内容的水平位置(左中右)

align-items 属性设置单元格内容的垂直位置(上中下)

place-items 属性是上面这两个属性的合并简写形式:

注: 如果省略第二个值, 则浏览器认为与第一个值相等

上面属性的属性取值

  • start 对齐单元格的起始边缘
  • end 对齐单元格的结束边缘
  • center 单元格内部居中
  • stretch 拉伸, 占满单元格的整个宽度(默认值)

image-20211124215536646.png

image-20211124215717391.png

3.7 justify-content/align-content/place-content

justify-content属性是整个内容区域在容器里面的水平位置(左中右)

align-content属性是整个内容区域的垂直位置(上中下)

place-content属性是上面两个属性的合并简写属性:

上面属性的取值:

  • start 对齐容器的起始边框(默认情况)
  • end 对齐容器的结束边框
  • center 容器内部居中
  • stretch 项目大小没有指定时, 拉伸占据整个网格容器
  • space-around 每个项目两侧的间隔相等. 因此, 项目之间的间隔比项目与容器边框的间隔大一倍
  • space-between 项目与项目的间隔相等, 项目与容器边框之间没有间隔
  • space-evenly 项目与项目的间隔相等, 项目与容器边框之间也是同样长度的间隔

image-20211124221301739.png

image-20211124222003548.png

3.8 grid-auto-columns/grid-auto-rows

场景: 一些项目的指定位置, 在现有网格的外部. 比如网格只有3行, 但是某一个项目指定在第5行. 这时, 浏览器会自动生成多余的网格, 以便放置项目.

grid-auto-columns属性和grid-auto-rows属性用来设置, 浏览器自动创建的多余网格的列宽和行高.

它们的语法规范与grid-template-columns/grid-template-rows完全相同

如果不指定这两个属性, 浏览器完全根据单元格内容的大小, 决定新增网格的列宽和行高

image-20211125100959196.png

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属性指定项目的重叠顺序

image-20211125102215975.png

上面的代码指定了, 1号项目的左边框是第二根垂直网格线, 右边框是第四根垂直网格线. 并且, 只指定了1号项目的左右边框, 没有指定上下边框, 因此上下边框会采用默认位置, 即上边框是第一根水平网格线, 下边框是第二根水平网格线.

另外, 除了一号项目外, 其他项目都没有指定位置, 由浏览器自动布局, 这时它们的位置由容器的grid-auto-flow属性决定

下面的实例为指定item-1四个边框位置的示例

image-20211125112139518.png

image-20211125112332035.png

这里的代码效果和 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: /

image-20211125112845392.png

当然也可以使用span关键字表示跨越多少个网格

image-20211125112910949.png

斜杠以及后面的部分可以省略, 默认跨越一个网格

image-20211125112950004.png

3.3 grid-area

grid-area属性指定项目放在哪一个区域, 通常可以和grid-template-areas结合使用

另外, grid-area属性还可以用过grid-row-start, grid-column-start, grid-row-end, grid-column-end的合并简写形式, 直接指定项目的位置

image-20211125113457233.png

3.4 justify-self/align-self/place-self

justify-self属性设置单元格内容的水平位置(左中右), 跟justify-items属性用法完全一致, 但只作用域单个项目

align-self属性设置单元格内容的垂直距离(上中下), 跟align-items属性的作用完全一致, 也是只作用于单个项目

place-self属性是上面两个属性的合并简写属性: