网格布局Grid

网格布局，Grid 布局，也叫栅格布局，是一种二维网格布局。

Grid 布局有三个重要的属性：行(row)，列(column)，沟槽(gutter，行列间隙)。

术语

网格容器 Grid Container

通过声明元素 display: grid 或者 display: inline-grid 创建了网格容器（grid container）。

网格项 Grid Item

网格容器内的直接子元素均为网格项（grid item），但是孙元素不属于。

网格线 Grid Line

构成网格结构的分割线,位于行或者列的任意一端。

网格单元 Grid Cell

两个相邻行和两个相邻列网格线之间的区域。

fr

新单位 fr 表示网格容器中可用空间的一部分。

grid-template-columns: 1fr 1fr 1fr; 表示划分成三列，每列占三分之一。
grid-template-columns: 500px 1fr 2fr; 表示划分成三列，首列占 500px，第二列占剩余部分的三分之一，最后一列占剩余部分的三分之二。

当网格中有大量的轨迹时，我们可以使用 repeat() 符号

grid-template-columns: repeat(3, 1fr); => grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(2, 1fr 2fr); => grid-template-columns: 1fr 2fr 1fr 2fr;

网格属性

网格容器属性	网格元素属性
display	grid-column-start
grid-template-columns	grid-column-end
grid-template-rows	grid-row-start
grid-template-areas	grid-row-end
grid-template	grid-column
grid-column-gap	grid-row
grid-row-gap	grid-area
grid-gap	justify-self
justify-items	align-self
align-items	place-self
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

grid-template-columns

grid-template-columns 它决定了网格中最多存在多少列以及每列的宽度大小。

grid-auto-columns 显示的定义每列的列宽。

其值：

none: 表示没有显式的网格列，根据 grid-auto-columns 自动生成。
: 指定列宽。如 700px。
: 百分比。如 10%。
: 自适应布局。使用单位 fr。
minmax(min, max): 指定最小值和最大值。auto 表示自适应。
repeat: 重复列表。

.container--grid-template-columns {
  grid-template-columns: 120px 80px;
}

120px

80px

120px

80px

grid-template-rows

grid-template-rows 规定 grid 的高度。

grid-auto-rows 显式的定义每行的高度。

其值：

none: 没有显式的网格高度，根据 grid-auto-rows 自动生成。
: 指定高度数值。如 700px。
: 百分比。如 10%。
: 自适应布局。使用单位 fr。
minmax(min, max): 指定最小值和最大值。auto 表示自适应。
repeat: 重复列表。

.container--grid-template-rows {
  grid-template-rows: 40px 2rem 60px;
}

40px

2rem

60px

gap

gap 表示行列之间的间隙。gap 是 row-gap 和 columns-gap 的简写。row-gap 表示行间隙，columns 表示列间隙。

justify-items

沿行轴对其网格对齐网格项目。应用于容器内的所有网格项目。

其值：justify-items: start | end | center | stretch(default);

示例：

start

end

center

stretch

align-items

沿列轴对其网格对其网格项目。应用于容器内的所有网格项目。

其值：align-items: start | end | center | stretch(default);