logo

Grid布局

CSS Grid是用于专门解决布局问题而创建的CSS模块。相对Flex布局只能在一个方向维度(行或列)上进行布局,Gird布局可以实现更加复杂的二维方向(行与列)布局。
Grid布局维度上的增强,使得Grid布局的复杂度相对于Flex布局随之提高。
目前支持度如下,还行口巴😭:

CSS Grid Playground,结合Playground食用更佳。

基础术语

在学习Grid布局前,我们需要先了解一哈相关的术语。

网格容器(Grid Container),网格项(Grid Item)

使用网格布局时设置display:grid的元素为Grid Container,而Container的直系子元素就是Grid Item。这一点与Flex有些相似。
下面HTML代码中nav元素就不是Gird Item

1
2
3
4
5
6
7
<div style="display:grid">//Grid Container
<header>//Grid Item
<nav></nav> //Not Grid Item
</header>
<main></main>//Grid Item
<footer></footer> //Grid Item
</div>

网格线(Grid Line),网格轨道(Grid Track),网格单元格(Grid Cell),网格区域(Grid Area)

在Grid布局中,Grid Container会划分为一个个网格,这个网格类似于Table。
因此我们可以Grid Container划分的网格想象成一个’Table’,Grid Line/Track/Cell也就对应着Table的不同部分与区域。

See the Pen blog-grid by Aaron (@noobcoderclub) on CodePen.

结合上面的小demo:

  • Grid Line,网格布局中的线,并且一个方向上从上到下,从左到右,从1开始编号,每条线都有各自的编号,上面的例子中的线从上往下编号为3.
  • Grid Track, 网格布局中的一行或一列
  • Grid Cell, 网格布局中被行列划分出来的单元格
  • Grid Area, 多个Grid Cell 可以组成网格区域

网格容器(Grid Container)属性

display:grid/inline-grid

区别在于display:block/inline-block之间的差异(块级元素,内联块级元素)。

See the Pen grid and inline-grid by Aaron (@noobcoderclub) on CodePen.

grid-template-rows/grid-template-colums

用于定义网格的行与列以及其大小,也就是生成Grid Track及其大小。
语法如下:

1
2
3
4
.container{
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

track-size可以为:

  • length,长度值
  • none,这个关键字表示不明确的网格。所有的行和其大小都将由grid-auto-rows 属性隐式的指定。
  • percentage,相对于容器大小百分比
  • flex,单位fr,类似于Flex,按比例分配剩余空间的值
  • max-content/min-content,在一个Grid Track可占据的最大/最小值
  • minmax(min,max),指定网格大小在一个范围内
  • repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ),重复声明Grid Track
  • fit-content( [ <length> | <percentage> ] )

grid-template-areas

定义网格区域名称,可以将网格划为不同Grid Area,Grid Item 可以通过grid-area属性来设置自身所在的Grid Area。
如果两个Grid Item声明的Grid Area相同则会产生重叠,类似于定位中的层叠关系,可以使用z-index属性来设置层叠关系。
使用.来声明一个未定义的Grid Area区域

grid-column-gap/grid-row-gap/grid-gap:row-value column-value

设置Grid Track之间的间距

justify-items/align-items

类似于Flex布局,定义Grid Item在Grid Area中的对齐方式。
对应值有start/end/center/stretch(默认值)。

justify-content/align-content

类似于Flex布局,定义Grid Track之间的对齐方式。
对应值有start/end/center/space-around/space-between/space-evenly

grid-auto-columns/grid-auto-rows

设置隐式Grid Track的值。隐式是指没有定义值的Grid Trace。

在上面这例子中,只定义了一个2x2的网格,而第五个Grid Item将网格拓展成3x3,未定义的Grid Trace自动使用grid-auto-columns/grid-auto-rows定义的值

grid-auto-flow

当一个Grid Item没有声明排序方式,会按照的自动布局算法进行排序。
对应值有row(默认)/column/dense


grid-auto-flow:column;

网格项(Grid Item)属性

grid-column-start/grid-column-end/grid-row-start/grid-row-end

用于指定描述网格项所在Grid Area的区域,而用于描述的就是Grid Line,用Grid Line划出一个矩形Grid Area。
可以有以下值。

1
2
3
4
5
6
.item{
grid-column-start:auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ];
grid-column-end:auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ];
grid-row-start:auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ];
grid-row-end:auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ];
};

语法详情见:MDN

grid-column/grid-row

分别是grid-column-start/end 与 grid-row-start/end 的缩写。两个属性使用’/‘隔开

grid-area

描述Grid Item所在区域,可以引用Grid Container的grid-tempalte-area声明的区域,也可以用Grid Line来声明区域。

justify-self/align-self

与Flex相似,为单一的Grid Item设置对齐方式。

最后

从这一大堆属性我们可以了解到Grid布局的强大,可以轻松完成各种布局,Grid 🐮🍺!!!