网格布局（grid layout）基础

网格grid基础Grid布局是一种二维网格布局，有行和列的概念，可用于布局页面主要的区域或小型组件。使用display: grid定义网格布局显式网格（explicit grid）和隐式网格（implicit grid）使用grid-template-rows和gird-template-columns定义网格行数和列数，未超出定义的行数和列数的部分称为显式网格；如果放置了超出显示网格数量的gri

前端搬砖工哎

7736人浏览 · 2021-12-24 22:19:38

前端搬砖工哎 · 2021-12-24 22:19:38 发布

1 网格grid基础

Grid布局是一种二维网格布局，有行和列的概念，可用于布局页面主要的区域或小型组件。

1.1 使用display: grid定义网格布局

1.2 显式网格（explicit grid）和隐式网格（implicit grid）

使用grid-template-rows和gird-template-columns定义网格行数和列数，未超出定义的行数和列数的部分称为显式网格；如果放置了超出显示网格数量的grid items，那么网格算法（grid algorithm）将会创建额外的row或者column、tracks来包含这些内容，此时额外的部分称为隐式网格；

示例：网格布局定义2行3列的6个网格，前六个为显式网格，超出的第三行2个网格，称为隐式网格

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
}

1.3 Grid lines 网格线

使用grid布局在显式网格中定义轨道的同时会创建网格线

如图：2行3列的网格拥有3条行列4条列线

网格线的作用：配合：grid-column-start、grid-column-end:、grid-row-start、grid-row-end使用，可指定item的放置网格位置;
命名网格线：在显式网格中，可对网格线进行命名，如下示例，第一个元素占据了2行2列；

.wrapper {
    display: grid;
    grid-template-columns: [colline1] 1fr [colline2] 1fr [colline3] 1fr [colline4];
    grid-template-rows: [rowline1] 100px [rowline2] 100px [rowline3];
}
.wrapper div:first-child {
    grid-column-start: colline1;
    grid-column-end: colline3;
    grid-row-start: rowline1;
    grid-row-end: rowline3;
}

1.4 Grid tracks 网格轨道

1.4.1 轨道大小

显示网格中，使用grid-template-columns 和 grid-template-rows 定义网格轨道，可以使用任意单位，也可以使用fr来分配网格轨道空间，类似flex；
隐式网格中创建的轨道默认为自动大小，但可以通过 grid-auto-rows 和 grid-auto-columns 属性来定义这些轨道的大小；

1.4.2 网格轨道：是两条网格线之间的空间。

1.5 Grid row 网格行

网格行是Grid布局中的水平轨道，即两个水平网格线之间的空间。它通过属性 grid-template-rows 或者简写属性 grid， grid-template 定义；
在隐式网格中，默认隐式网格的行自动调整大小，使用 grid-auto-rows 属性指定其大小

1.6 Grid column 网格列

在隐式网格中，默认隐式网格的列自动调整大小，使用 grid-auto-columns 属性指定其大小。
网格列是Grid布局中的垂直轨道，即两个垂直网格线之间的空间。它通过属性 grid-template-columns 或者简写属性 grid，grid-template 定义；

1.7 Grid cell 网格单元格

四条网格线之间的空间，称为网格单元格，这是网格布局中的最小单元。
Gutters 网格间距
1. 网格间距与网格线：网格间距的表现得类似网格线撑开了指定大小，且不被允许放置任何内容。因此在网格线之后放置的任何item都从网格间距后开始。
2. 网格间距是网格轨道之间的间距，可以通过 grid-column-gap 、grid-row-gap或grid-gap在Grid布局中创建。

1.8 Grid Areas 网格区域

网格区域在网格布局中由一个或者多个网格单元格组成的一个矩形区域。两种情况会创建网格区域：
- 使用网格线（如：grid-column-start、grid-column-end:、grid-row-start、grid-row-end等）指定网格区域
- 使用grid-area，grid-area 是一种对于 grid-row-start、grid-column-start、grid-row-end和 grid-column-end的
```
.item1 {
    grid-area: auto;
    grid-area: auto / auto;
    grid-area: auto / auto / auto;
    grid-area: auto / auto / auto / auto;
}
```
- 使用命名的网格区域（如：grid-area: a）定义一个item的区域命名为a，然后使用grid-template-areas放置a的位置。如下所示
```
.wrapper {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 100px 100px;
    grid-template-areas:
      "a a b"
      "a a b";
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
}
```

2 Grid网格属性

3 应用于gird-template-rows或gird-template-column的部分值解释

minmax(min, max)：定义一个弹性行或列的大小范围，大于等于 min值，并且小于等于max值。
fit-content(大小/百分比)：定义轨道尺寸，其中最大尺寸由max-content定义，最小尺寸由auto定义，其计算方式类似于auto（即minmax(auto, max-content)）。
repeat()：以更简洁的形式编写大量表现出重复模式的列或行。