### 网格轨道(Grid Track)
相邻网格线之间的空间。可以将其视为网格的列或行。
这是第二行网格线和第三行网格线之间的网格轨道。
### 网格区域(Grid Area)
由四个网格线包围的总空间。网格区域可以由任意数量的网格单元(grid cells)组成。这是位于第1行网格线和第3行网格线之间，以及第1列网格线和第3列网格线之间的网格区域。
### 网格项(Grid Item)
网格容器的子元素（即直接子代）。在这个例子中，item元素是网格项，但sub-item不是。
```html
## 特殊单位和函数
### fr
在CSS Grid中，您可能会经常使用许多分数单位，比如`1fr`。它们的基本意思是“剩余空间的一部分”。因此，类似于以下声明：
```css
grid-template-columns: 1fr 3fr;
```
大致上表示25%和75%。不过，这些百分比值要比分数单位更为固定。举个例子，如果您给这些基于百分比的列添加了内边距，那么宽度就会超过100%（假设使用content-box盒模型）。与其他单位相比，分数单位在与它们的组合中更加友好，您可以想象一下：
```css
grid-template-columns: 50px min-content 1fr;
```
### Sizing相关
在调整行和列的大小时，您可以使用您习惯使用的所有长度单位，比如px、rem、%等，但您还可以使用关键字：
`min-content`：内容的最小大小。想象一下一行文字，比如“E pluribus unum”，min-content可能是单词“pluribus”的宽度。
`max-content`：内容的最大大小。以上面的句子为例，max-content是整个句子的长度。
`auto`：这个关键字与分数单位非常相似，只不过在分配剩余空间时，它们在大小方面“输给了”分数单位。
分数单位：请参考上文。
`fit-content()`函数利用可用空间，但不会小于min-content，也不会大于max-content。
`minmax()`函数的功能正如其名：为长度设置一个最小值和最大值，这在与相对单位结合使用时非常有用。例如，您可能希望列只能收缩到一定程度。这非常有用，很可能就是您所期望的：
```css
grid-template-columns: minmax(100px, 1fr) 3fr;
```
### repeat
repeat()函数可以节省一些输入：
```css
grid-template-columns:
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* easier: */
grid-template-columns:
repeat(8, 1fr);
/* especially when: */
grid-template-columns:
repeat(8, minmax(10px, 1fr));
```
当与关键字结合使用时，repeat()函数可以变得更加灵活：
- `auto-fill`: 在一行中尽可能放置尽可能多的列，即使它们是空的。
- `auto-fit`: 将所有列适应空间。优先将列扩展以填充空间，而不是保留空列。
这是CSS Grid中最著名的代码片段之一，也是有史以来最伟大的CSS技巧之一：
```css
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
```
`grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));` 是一种使用自适应网格布局的方式，它可以根据可用空间自动调整列的数量，并在每列之间保持最小和最大宽度的范围。
具体来说，这个表达式使用了 `repeat()` 函数和 `minmax()` 函数的组合：
- `repeat(auto-fit, minmax(250px, 1fr))`：这里的 `auto-fit` 表示自动调整列的数量以适应可用空间，而不会导致溢出或换行。它会根据容器的宽度自动计算可以容纳的列数。
- `minmax(250px, 1fr)`：这个函数表示列的宽度可以在 250px 和 1fr（剩余空间的等分）之间进行调整。列的最小宽度是 250px，最大宽度是剩余空间的等分，即自动平均分配剩余的可用空间。
这个表达式的效果是，网格布局会根据可用空间动态调整列的数量，并且每个列的宽度会在最小值和最大值之间自适应调整。**当容器宽度增加时，会自动添加更多的列，并且每个列会相应地变窄，以保持整体布局的平衡**。
这种技术通常用于创建响应式网格布局，使网格可以根据不同设备和屏幕尺寸自动适应，并具有灵活的列宽度调整能力。
### Masonry（实验性）
CSS Grid的一项实验性功能是砌体布局（masonry layout）。请注意，对于CSS砌体布局，有很多方法可供选择（可参考链接：[CSS砌体布局的不同方法](https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/)），但它们大多是一些技巧，要么有重大缺陷，要么与您的期望不完全一致。
[规范现在已经有了官方的实现方式](https://drafts.csswg.org/css-grid-3/#masonry-layout)，而这在Firefox浏览器中是通过标志开启的。
```css
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
```
### Subgrid（Firefox only）
Subgrid是网格布局中非常有用的功能，它允许网格项拥有自己的网格，并从父网格继承网格线。
```css
.parent-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
}
.grid-item {
grid-column: 2 / 7;
display: grid;
grid-template-columns: subgrid;
}
.child-of-grid-item {
/* gets to participate on parent grid! */
grid-column: 3 / 6;
}
```
目前只有Firefox支持这一功能，但它确实应该得到广泛应用。
另外，了解`display: contents;`也是很有用的。虽然它与subgrid不同，但在某些情况下可以起到类似的作用。
```html
您的声明中的每一行都需要具有相同数量的单元格。
您可以使用任意数量的相邻句点来声明一个空单元格。只要句点之间没有空格，它们就代表一个单元格。
请注意，使用此语法时，并未为行线命名，只为区域命名。使用此语法时，实际上会自动为区域两端的线条命名。如果您的网格区域名为foo，那么该区域起始行线和起始列线的名称将是foo-start，而最后一行线和最后一列线的名称将是foo-end。这意味着某些线可能具有多个名称，例如上述示例中的最左侧线将有三个名称：header-start、main-start和footer-start。
### grid-template
一种用于在单个声明中设置`grid-template-rows`、`grid-template-columns`和`grid-template-areas`的简写方式。
取值：
```
none - 将三个属性都设置为初始值。
这些间距只会在列/行之间创建，而不会出现在外部边缘。
> 注意：grid-前缀将被移除，并且grid-column-gap和grid-row-gap将更名为column-gap和row-gap。未加前缀的属性已在Chrome 68+、Safari 11.2 Release 50+和Opera 54+中得到支持。
#### `gap` & `grid-gap`
`row-gap`和`column-gap`的简写形式
取值：
```
```css
.container {
justify-items: end;
}
```
```css
.container {
justify-items: center;
}
```
```css
.container {
justify-items: stretch;
}
```
这种行为也可以通过 `justify-self` 属性在单个网格项上进行设置。
#### align-items
该属性用于沿块轴（与 justify-items 属性沿行内轴对齐的方式相对）对齐网格项。此值适用于容器内的所有网格项。
取值：
```
stretch – 撑满整个单元格的高度（默认值）
start – 将项目与其单元格的起始边对齐
end – 将项目与其单元格的结束边对齐
center – 将项目居中对齐于其单元格
baseline – 将项目沿文本基线对齐。对于多行文本，可以使用 first baseline 和 last baseline 修饰符，将使用第一行或最后一行的基线。
```
```css
.container {
align-items: start | end | center | stretch;
}
```
Examples:
```css
.container {
align-items: start;
}
```
```css
.container {
align-items: end;
}
```
```css
.container {
align-items: center;
}
```
```css
.container {
align-items: stretch;
}
```
这种行为也可以通过 `align-self` 属性在单个网格项上进行设置。
此外，还有修饰关键字 `safe` 和 `unsafe`（使用方式类似于 `align-items: safe end`）。`safe` 关键字表示“尝试按照指定方式对齐，但不要导致项目移动到不可访问的溢出区域”，而 `unsafe` 则允许将内容移动到不可访问的区域（可能会导致数据丢失）。
#### place-items
`place-items` 属性可以在一次声明中同时设置 `align-items` 和 `justify-items` 属性。
取值：
```
```css
.container {
justify-content: end;
}
```
```css
.container {
justify-content: center;
}
```
```css
.container {
justify-content: stretch;
}
```
```css
.container {
justify-content: space-around;
}
```
```css
.container {
justify-content: space-between;
}
```
```css
.container {
justify-content: space-evenly;
}
```
#### align-content
有时候，您的网格的总尺寸可能小于其网格容器的尺寸。这可能发生在所有网格项都使用非灵活单位（如像素px）进行尺寸设置的情况下。在这种情况下，您可以设置网格在网格容器内的对齐方式。此属性沿块轴（与 `justify-content` 属性沿行内轴对齐的方式相对）对齐网格。
取值：
```
start – 将网格与网格容器的起始边对齐
end – 将网格与网格容器的结束边对齐
center – 将网格居中对齐于网格容器
stretch – 调整网格项的大小，使网格填满网格容器的整个高度
space-around – 在每个网格项之间均匀分布一定量的空白，两端空白的大小为中间空白的一半
space-between – 在每个网格项之间均匀分布一定量的空白，两端没有空白
space-evenly – 在每个网格项之间（包括两端）均匀分布一定量的空白
```
```css
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
```
示例:
```css
.container {
align-content: start;
}
```
```css
.container {
align-content: end;
}
```
```css
.container {
align-content: center;
}
```
```css
.container {
align-content: stretch;
}
```
```css
.container {
align-content: space-around;
}
```
```css
.container {
align-content: space-between;
}
```
```css
.container {
align-content: space-evenly;
}
```
#### place-content
`place-content` 属性可以在一次声明中同时设置 `align-content` 和 `justify-content` 属性。
取值：
```
```css
.item-a {
justify-self: end;
}
```
```css
.item-a {
justify-self: center;
}
```
```css
.item-a {
justify-self: stretch;
}
```
要为网格中的*所有*项设置对齐方式，还可以通过`justify-items`属性在网格容器上设置此行为。
### align-self
以一种方式将网格项沿着列轴（与沿着行轴对齐的justify-self相对）对齐于单元格内。此值适用于单个网格项内的内容。
取值：
```
start - 将网格项与单元格的起始边对齐
end - 将网格项与单元格的结束边对齐
center - 将网格项居中对齐于单元格中
stretch - 填充整个单元格的高度（默认值）
```
```css
.item {
align-self: start | end | center | stretch;
}
```
Examples:
```css
.item-a {
align-self: start;
}
```
```css
.item-a {
align-self: end;
}
```
```css
.item-a {
align-self: center;
}
```
```css
.item-a {
align-self: stretch;
}
```
要对齐网格中的*所有*项，还可以通过`align-items`属性在网格容器上设置此行为。
### place-self
place-self在单个声明中同时设置align-self和justify-self属性。
取值：
```
auto - 布局模式的“默认”对齐方式。
```css
.item-a {
place-self: center stretch;
}
```
除了Edge浏览器外，所有主流浏览器都支持`place-self`简写属性。
## 浏览器支持情况
### Desktop
| Chrome | Firefox | IE | Edge | Safari |
| :----- | :------ | :--- | :--- | :----- |
| 57 | 52 | 11* | 16 | 10.1 |
### Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
| :------------- | :-------------- | :------ | :--------- |
| 114 | 113 | 114 | 10.3 |
## 流式列代码片段
下面是一个用于创建流式列的CSS代码片段：
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
```
这个代码片段将一个包含列的容器元素定义为网格布局。`grid-template-columns`属性设置了列的大小和数量。在这个例子中，我们使用`repeat(auto-fit, minmax(200px, 1fr))`来创建自适应的列。它的意思是列的宽度将自动适应容器的大小，并且每列的最小宽度为200像素，最大宽度为1个单位。这使得列可以自动调整大小以填充容器。
`gap`属性定义了列之间的间隔，这里设置为20像素。您可以根据需要调整这个值。
您可以将这段代码应用于适当的HTML元素，以创建流式列布局。
## CSS Grid动画
根据CSS Grid布局模块一级规范，有五个可动画化的网格属性：
1. grid-gap、grid-row-gap、grid-column-gap可以使用长度、百分比或calc作为值。
2. grid-template-columns、grid-template-rows可以作为简单的长度、百分比或calc组成的列表，只要列表中的长度、百分比或calc组件的值有所不同即可。
截至目前，已经有一些经过测试的浏览器支持对(grid-)gap、(grid-)row-gap和(grid-)column-gap进行动画化处理。
| Browser | `(grid-)gap`, `(grid-)row-gap`, `(grid-)column-gap` | `grid-template-columns` | `grid-template-rows` |
| :------------------------------------- | :-------------------------------------------------- | :---------------------- | :------------------- |
| Firefox | supported ✅ 53+ | supported ✅ 66+ | supported ✅ 66+ |
| Safari 12.0 | not supported ❌ | not supported ❌ | not supported ❌ |
| Chrome | supported ✅ 66+ | not supported ❌ | not supported ❌ |
| Chrome for Android 66+, Opera Mini 33+ | supported ✅ | not supported ❌ | not supported ❌ |
| Edge | supported ✅ 16+ | not supported ❌ | not supported ❌ |
示例：
```html
Check this post for more details