前端技术文档

Appearance

Grid 布局 ​

概念 ​

网格行(row)：网格项的水平线称为行 图片 2.png

网格列(column):网格项的垂直线称为列 图片 1.png

网格间隙(gap)：每列/行之间的空间称为网格间隙

图片 3.png

声明 grid 布局 ​

css
/*定义一个块级元素为网格布局  */
display: grid;
/* 定义一个行内元素为网格布局 */
display: inline-grid;
/* 定义一个继承父级网格容器行和列大小的网格容器 */
display: subgrid;

可以使用的单位 ​

  • fr：
  • %:
  • px:
  • rem:
  • em:

父元素属性 ​

父元素属性主要分为四个方面：

  • 定义网格大小： grid-template: grid-template-rows、grid-template-columns 和 grid-template-areas。
  • 定义网格间距： grid-gap: grid-row-gap 和 grid-column-gap。
  • 定义隐式网格的大小： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
  • 定义横纵方向的对齐方式：justify-content、align-content、justify-items 和 align-items。

1. 定义网格大小 ​

grid-template：

grid-template-rows + grid-template-columns + grid-template-areas 的缩写

grid-template-rows：

定义网格的每一行

grid-template-rows: 20px 40px 60px;
1
2
3
grid-template-rows: 1fr 1fr 2fr;
1
2
3

grid-template-columns：

定义网格的每一列

grid-template-columns: 20px 40px 60px;
1
2
3
grid-template-columns: 1fr 1fr 2fr;
1
2
3

grid-template-areas：

网格区块 (grid areas) 和网格项 (grid item) 沒有关联，但是它们可以和一些网格定位属性关联起来，比如 grid-row-start， grid-row-end， grid-column-start 和 grid-column-end；

2. 定义网格间距 ​

grid-gap:

grid-row-gap + grid-column-gap 的缩写。

行间隔100px，列间隔1em：
        grid-gap: 100px 1rem;
1
2
3
4
行间隔2rem，列间隔2rem：
        grid-gap: 2rem
1
2
3
4

grid-row-gap:

设置行间隔

grid-column-gap:

设置列间隔

3. 定义隐式网格的大小 ​

隐式网格是指没有被声明的网格。

grid-auto-rows:

设置隐式网格行的大小

只指定第一行高为30px，其它行高通过grid-auto-rows设置为70px：
        grid-auto-rows: 70px;
1
2
3
4
5
6

grid-auto-columns:

设置隐式网格列的大小

只指定第一列宽为30px，其它列宽通过grid-auto-columns设置为70px：
        grid-auto-columns: 70px;
1
2
3
4
5
6

grid-auto-flow:

设置没有被声明在网格网格上的元素的自动放置方向

        grid-auto-flow: row
1
2
3
4
        grid-auto-flow: column
1
2
3
4

4. 定义横纵方向的对齐方式 ​

place-content:

align-content + justify-content 的缩写

justify-content：

justify-content 指定网格元素的水平分布方式。此属性需要网格总宽度小于 grid 容器宽度时有效果。

css
/* 可选值： */
start | center| end | space-evenly | space-around | space-between;
        justify-content: start;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        justify-content: end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        justify-content: center;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        justify-content: space-around;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        justify-content: space-between;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        justify-content: space-evenly;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

align-content： align-content 指定垂直方向每一行 grid 元素的分布方式。如果所有 grid 子项只有一行，则 align-content 属性没有效果。此属性也需要网格的总高度小于 grid 容器高度时有效果。

css
/* 可选值： */
start | center | end | space-between | space-evenly| space-around;
        align-content: start;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        align-content: end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        align-content: center;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        align-content: space-around;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        align-content: space-between;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        align-content: space-evenly;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

place-items:

align-items + justify-items的缩写

justify-items：

设置每一个子元素在内部网格的水平位置

css
justify-items: start | end | center | stretch(默认);
        justify-items: stretch
1
2
3
4
        justify-items: start
1
2
3
4
        justify-items: center
1
2
3
4
        justify-items: end
1
2
3
4

align-items：

设置每一个子元素在内部网格的垂直方向上的位置

css
align-items: start | end | center | stretch(默认);
        align-items: stretch
1
2
3
4
        align-items: start
1
2
3
4
        align-items: center
1
2
3
4
        align-items: end
1
2
3
4

子元素属性 ​

子元素属性主要分为两个个方面：

  • 定义子元素的大小：grid-area：grid-row-start、grid-column-start、grid-row-end 和 grid-column-end。
  • 定义子元素的位置：justify-self 和 align-self。

1. 定义子元素的大小 ​

grid-area:

grid-row-start + grid-column-start + grid-row-end + grid-column-end 的缩写

从第二行第二列开始，到第五行第四列结束，但不包括第五行第四列：
        grid-area: 2 / 2/ 5 /4;
1
2
3
4
5
6
7
从第二行开始, 并跨越三行；从第一列开始，并跨越二列：
        grid-area: 2 / 1 / span 3 / span 2;
1
2
3
4
5
6
7

grid-row:

设置元素所占的行数，grid-row-start + grid-row-end 的缩写

从第一行开始，到第四行结束，不包括第四行：
        grid-row-start: 1;
        grid-row-end: 4;
1
2
3
4
5
6
7

grid-column:

设置元素所占的列数，grid-column-start + grid-column-end 的缩写。

从第一列开始，到第四列结束，不包括第四列 ：
        grid-column-start: 1;
        grid-column-end: 4;
1
2
3
4

2. 定义子元素的位置 ​

justify-self:

单独设置当前元素在内部网格的水平位置

css
justify-self: start | end | center | stretch(默认);

align-self:

单独设置当前元素在内部网格的垂直方向上的位置

css
align-self: start | end | center | stretch(默认);