# grid-layout

**Repository Path**: winfredli/grid-layout

## Basic Information

- **Project Name**: grid-layout
- **Description**: Grid网格布局
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-26
- **Last Updated**: 2025-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Grid 网格布局

## 一、基础概念

### 1.网格容器

> 声明 `display：grid` 或 `display：inline-grid` 来创建一个网格容器。一旦我们这样做，这个元素的所有**直系子元素**将成为**网格项目**。

```html
<div class="wrapper">
  <div>一</div>
  <div>二</div>
  <div>三</div>
  <div>四</div>
  <div>五</div>
</div>
```

```css
.wrapper {
  display: grid;
}
```

![image](./images/1.1.png)

### 2.网格轨道

> 网格轨道（grid track）是网格上任意两条相邻线之间的空间。

通过使用 `grid-template-columns` 和 `grid-template-rows` 属性或简写的 `grid` 或 `grid-template` 属性，可在显式网格中定义网格轨道。

#### 1.1 基本示例

```html
<div class="wrapper">
  <div>一</div>
  <div>二</div>
  <div>三</div>
  <div>四</div>
  <div>五</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
```

![image](./images/1.2.1.png)

#### 1.2 `fr` 单位

> 代表网格容器中可用空间的一部分。

```html
<div class="wrapper">
  <div>一</div>
  <div>二</div>
  <div>三</div>
  <div>四</div>
  <div>五</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 剩余可用空间：1:1:1 */
}
```

![image](./images/1.2.2.png)

#### 1.3 不同尺寸

```css
.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}
```

![image](./images/1.2.3.png)

#### 1.4 混合弹性尺寸和绝对尺寸

```css
.wrapper {
  display: grid;
  grid-template-columns: 500px 1fr 2fr;
}
```

![image](./images/1.2.4.png)

#### 1.5 使用 `repeat()` 标记

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
```

同

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```

![image](./images/1.2.5.png)

也可以用于重复轨道列表中的一部分：

```css
.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}
```

![image](./images/1.2.6.png)

创建一个多轨道模式的重复轨道列表：

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr); /* 每行按照1:2重复2次 */
}
```

![image](./images/1.2.7.png)

#### 1.6 隐式和显式网格

- 显式网格：手动定义的。`grid-template-columns` `grid-template-rows`
- 隐式网格：自动创建的。`grid-auto-columns` `grid-auto-rows`

```css
.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 定义显式网格 行 */
}
```

只定义了显式网格的行，如果内容太多，会自动在隐式网格中创建行和列：

![image](./images/1.2.8.png)

用 grid-auto-rows 属性来确保在隐式网格中创建的轨道的高是 `200px` :

```css
.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr; // 显式网格
  grid-template-rows: 100px; // 显式网格
  grid-auto-rows: 200px; // 隐式网格
}
```

![image](./images/1.2.9.png)

#### 1.7 轨道大小和 `minmax`

自动创建的行的最小高度为 `100px`，最大高度为 `auto`。

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // 显式 列
  grid-auto-rows: minmax(100px, auto); // 隐式 行
}
```

![image](./images/1.2.10.png)

### 3.网格线

> 当我们定义网格时，我们定义的是网格轨道，而不是网格线。网格布局会为我们创建网格线来让我们来定位每一个网格元素。

下面图中有 `4` 条纵向的网格线，`3` 条横向的网格线。

![image](./images/1.3.1.png)

#### 3.1 跨轨道放置网格项目

类似于表格跨行跨列。放置项目时，我们的目标是**网格线**而不是网格轨道。

- grid-column-start: 跨行开始位置
- grid-column-end: 跨行结束位置
- grid-row-start: 跨列开始位置
- grid-row-end: 跨列结束位置

```html
<div class="wrapper">
  <div class="box1">一</div>
  <div class="box2">二</div>
  <div class="box3">三</div>
  <div class="box4">四</div>
  <div class="box5">五</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  grid-auto-rows: 100px; /* 每行高度100px */
}

.box1 {
  grid-column-start: 1; /* 从第 1 条纵向网格线开始 */
  grid-column-end: 4; /* 到第 4 条纵向网格线结束 */
  grid-row-start: 1; /* 从第 1 条横向网格线开始 */
  grid-row-end: 3; /* 从第 3 条横向网格线结束 */
}

.box2 {
  grid-column-start: 1; /* 从第 1 条纵向网格线开始 */
  grid-row-start: 3; /* 从第 3 条横向网格线开始 */
  grid-row-end: 5; /* 从第 5 条横向网格线结束 */
}
```

![image](./images/1.3.2.png)

#### 3.2 网格线定位简写

- grid-column: 列
- grid-row: 行

斜线字符（`/`）前面的值为起始网格线，斜线字符（`/`）后面的值为终止网格线。

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.box2 {
  grid-column: 1;
  grid-row: 3 / 5;
}
```

### 4.网格单元

> `网格单元`是网格项中最小的单位，类似表格中的单元格。

![image](./images/1.4.png)

### 5.网格区域

> 项目可以按行或列跨越一个或多个单元格，这样就形成了一个`网格区域`。网格区域必须是矩形的（例如不能创建 L 形区域）。

![image](./images/1.5.png)

### 6.网格间距

> 网格间距就像一条粗线。

- column-gap: 横向间距 (保留 grid-column-gap)
- row-gap: 纵向间距 (保留 grid-row-gap)
- gap: 简写 (保留 grid-gap)

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px; /* 横向间距 */
  row-gap: 1em; /* 纵向间距 */
}
```

![image](./images/1.6.png)

### 7.嵌套网格

> 网格项可以也成为一个网格容器。

```html
<div class="wrapper">
  <div class="grid1">
    <div>a</div>
    <div>b</div>
    <div>c</div>
  </div>
  <div>二</div>
  <div>三</div>
  <div>四</div>
  <div>五</div>
</div>
```

```css
.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}
.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.grid1 {
  grid-column: 1 / 4;
}
.grid2 {
  grid-column: 1;
}
.grid1 > div {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;
}
```

![image](./images/1.7.1.png)

#### 7.1 不使用子网格的嵌套

在这种情况下，嵌套网格与父网格没有任何关系。

```css
.grid1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column: 1 / 4;
}
```

![image](./images/1.7.2.png)

#### 7.2 子网格

- `grid-template-columns: subgrid;` 使用父网格的轨道定义

```css
.grid1 {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: subgrid; /* 使用父网格的轨道定义 */
  grid-column: 1 / 4;
}
```

![image](./images/1.7.3.png)

### 8.使用 `z-index` 控制层级

> 网格项可以占据同一单元格，在这种情况下，以使用 `z-index` 属性来控制重叠项的堆叠顺序。

#### 8.1 不使用 z-index 的重叠

```html
<div class="wrapper">
  <div class="box box1">一</div>
  <div class="box box2">二</div>
  <div class="box box3">三</div>
  <div class="box box4">四</div>
  <div class="box box5">五</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
}
```

网格项目 `box2` 现在覆盖于 `box1` 之上，因为它在源文件顺序中排在后面。

![image](./images/1.8.1.png)

#### 8.2 控制顺序

```css
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  z-index: 2;
}
.box2 {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 1;
}
```

![image](./images/1.8.2.png)

## 二、网格布局和其他布局方法的联系

### 1.网格和弹性盒

#### 1.1 一维布局 vs. 二维布局

> 区别在于 `CSS 弹性盒布局`是为`一维布局`服务的（沿横向或纵向的），而`网格布局`是为`二维布局`服务的（同时沿着横向和纵向）。

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

```css
.wrapper {
  width: 500px;
  display: flex;
  flex-wrap: wrap;
}
.wrapper > div {
  flex: 1 1 150px;
}
```

有两个元素被换到了新行，这两个元素共享了这行的可用空间，并没有与上一行的元素对齐。这是因为当你允许弹性元素换行时，每个新行都变成了一个新的弹性容器。空间分布只在`行内`进行。

![image](./images/2.1.1.png)

**用 CSS 网格达成同样布局:**

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
```

![image](./images/2.1.2.png)

- 只需要按行或者列控制布局？那就用弹性盒子
- 需要同时按行和列控制布局？那就用网格

例如，给一个弹性元素设置百分比宽度来使它和上一行的元素对齐。这种情况下，网格是一个更好的选择。

#### 1.2 盒对齐

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
```

```css
.wrapper {
  display: flex;
  align-items: flex-end;
  min-height: 200px;
}
.box1 {
  align-self: stretch; /* 延伸 */
}
.box2 {
  align-self: flex-start;
}
```

![image](./images/2.1.3.png)

#### 1.3 网格中的对齐

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  grid-auto-rows: 200px;
}
.box1 {
  align-self: stretch; /* 延伸 */
}
.box2 {
  align-self: start;
}
```

![image](./images/2.1.4.png)

#### 1.4 `fr` 单位和 `flex-basis` 属性

我们可以通过使用 `repeat` 方法，配合 `auto-fill` 和 `auto-fit` 属性，创建类似弹性盒的效果，同时保证内容严格按照行和列的固定规则排列。

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    200px
  ); /* 保证元素可填充一行 类似 flex 自动换行效果 */
}
```

![image](./images/2.1.5.png)

#### 1.5 灵活的轨道数量

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
```

在确保元素最小宽度 `200px`，最大 `1fr` 的情况下自动创建轨道数（类似 flex 自动换行）。

![image](./images/2.1.6.png)

### 2.网格和绝对定位元素

#### 2.1 作为包含块的网格容器

> 网格加上 `position: relative;`，网格会作为绝对定位元素的容器。
> 绝对定位元素可以在容器内进行位置偏移（top、left...），但不会创建网格轨道。
> `grid-column-start`、`grid-column-end`、`grid-row-start`、`grid-row-end`同样生效。

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
    This block is absolutely positioned. In this example the grid container is
    the containing block and so the absolute positioning offset values are
    calculated in from the outer edges of the area it has been placed into.
  </div>
  <div class="box4">Four</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}
```

![image](./images/2.2.1.png)

#### 2.2 作为父级的网格容器

> 网格不加 `position: relative;`

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}
```

![image](./images/2.2.2.png)

### 3.网格和 `display: contents`

> 如果将元素设置为 `display: contents`，通常自身的盒子会消失，子元素的盒子仍显示，就像子元素在文档树中上升了一层。
> 这意味着一个网格元素的子元素可以成为网格元素。

#### 3.1 网格布局与子元素嵌套

```html
<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
}
```

- 第一个元素包含三个嵌套的子元素，由于这些子元素不是网格的直接子元素，因此它们不会成为网格布局的一部分，因此使用常规的块布局进行显示。

![image](./images/2.3.1.png)

**使用 `display: cintents`：**

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  display: contents;
}
```

- 将 `display：contents` 添加到 `box1` 的样式规则中，则该元素的盒子将消失，子元素成为网格元素，并且应用自动定位规则放置在网格中。

![image](./images/2.3.2.png)

## 三、基于线的定位

- grid-column: `grid-column-start`、`grid-column-end`的简写
- grid-row: `grid-row-start`、`grid-row-end`的简写

### 1.使用线编号定位元素

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}
.box1 {
  grid-column-start: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column-start: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row-start: 3;
}
```

![image](./images/3.1.png)

### 2.默认跨度

- 如果一个元素只延伸一个轨道的话，你可以省略 grid-column-end 或 grid-row-end 值。
- 元素默认延伸一个轨道。

**普通写法：**

```css
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.box2 {
  grid-column-start: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.box3 {
  grid-column-start: 2;
  grid-row-start: 1;
}
.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
}
```

**默认跨度的简写：**

```css
.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
```

### 3.`grid-area` 属性

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

```css
.box1 {
  grid-area: 1 / 1 / 4 / 2;
}
.box2 {
  grid-area: 1 / 3 / 3 / 4;
}
.box3 {
  grid-area: 1 / 2 / 2 / 3;
}
.box4 {
  grid-area: 3 / 2 / 4 / 4;
}
```

![image](./images/3.3.png)

### 4.反方向计数

> 最后一条线是指显式定义网格的最后一条线，即由 grid-template-columns 和 grid-template-rows 定义的网格，并不把隐式定义网格的加入的行和列纳入考虑。

```css
.box1 {
  grid-column-start: -1;
  grid-column-end: -2;
  grid-row-start: -1;
  grid-row-end: -4;
}
.box2 {
  grid-column-start: -3;
  grid-column-end: -4;
  grid-row-start: -1;
  grid-row-end: -3;
}
.box3 {
  grid-column-start: -2;
  grid-column-end: -3;
  grid-row-start: -1;
  grid-row-end: -2;
}
.box4 {
  grid-column-start: -2;
  grid-column-end: -4;
  grid-row-start: -3;
  grid-row-end: -4;
}
```

![image](./images/3.4.png)

**使元素跨越整个网格**：

```css
.item {
  grid-column: 1 / -1;
}
```

### 5.间距

- column-gap: 列间距
- row-gap: 行间距

```css
.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  column-gap: 20px;
  row-gap: 1em;
}
```

![image](./images/3.5.png)

**网格间距简写**：

- gap: row-gap column-gap;

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 1em 20px;
}
```

### 6.使用 `span` 关键字

- 除了`“起始线与结束线”`的定位方法，还可以使用`“起始线与跨越轨道数量”`的定位方法。

```css
.box1 {
  grid-column: 1;
  grid-row: 1 / span 3; /* 跨越 3 条线 */
}
.box2 {
  grid-column: 3;
  grid-row: 1 / span 2; /* 跨越 2 条线 */
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / span 2; /* 跨越 2 条线 */
  grid-row: 3;
}
```

![image](./images/3.6.png)

**也可以在 `grid-row-start/grid-row-end` 和 `grid-column-start/grid-column-end` 属性中使用 span 关键字**：

设定了起始行，结束线在跨越 3 条线之后：

```css
.box1 {
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: span 3; /* 往下跨越 3 条线 */
}
```

从指定的线往上跨越 3 条线：

```css
.box1 {
  grid-column-start: 1;
  grid-row-start: span 3; /* 往上跨越 3 条线 */
  grid-row-end: 4;
}
```

## 四、网格模板区域

### 1.命名网格区域

> 先给一个区域命名，然后在 `grid-template-areas` 属性值中指定这个区域的位置。

比如，如果要创建下面的布局，可以先划分出 `4` 个主要的区域。通过 `grid-area` 属性为这些区域各分配一个名字，**这不会影响布局**。

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
```

有了这些名字，接下来就可以创建布局了。要把完整的布局都写在网格容器中：

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "ft ft ft ft   ft   ft   ft   ft   ft";
}
```

```html
<div class="wrapper">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>
```

![image](./images/4.1.png)

### 2.留出空白的网格单元

> 留出空单元的方法是使用句点符，“.”

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    ".  .  .  ft   ft   ft   ft   ft   ft";
}
```

![image](./images/4.2.png)

> 如果在多个句点符号之间没有空格，那它们就会被计为一个单元格.

### 3.跨越多个网格单元

> grid-template-areas 的值必须是一个完整的网格，否则无效（即这个属性会被忽略掉）。
> 这意味着应该让每一行都有相同数量的单元格，如果出现句点符就表示这个单元格将被留空。
> 如果创建的区域不是矩形，也是无效的网格。

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-template-areas:
    "hd hd hd hd   hd   hd   hd   hd   hd"
    "sd sd sd main main main main main main"
    "sd sd sd  ft  ft   ft   ft   ft   ft";
}
```

![image](./images/4.3.png)

### 4.用媒体查询重新定义网格

```css
.header {
  grid-area: hd;
}
.footer {
  grid-area: ft;
}
.content {
  grid-area: main;
}
.sidebar {
  grid-area: sd;
}
.wrapper {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  grid-template-columns: 1fr;
  grid-template-areas:
    "hd"
    "main"
    "sd"
    "ft";
}
@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "sd sd sd  ft  ft   ft   ft   ft   ft";
  }
}
@media (min-width: 700px) {
  .wrapper {
    grid-template-areas:
      "hd hd hd   hd   hd   hd   hd   hd hd"
      "sd sd main main main main main ft ft";
  }
}
```

**width > 700px:**

![image](./images/4.4.1.png)

**500px < width < 700px:**

![image](./images/4.4.2.png)

**width < 500px:**

![image](./images/4.4.3.png)

### 5.在 `UI` 元素上使用 `grid-template-areas`

```html
<div class="media">
  <div class="image"></div>
  <div class="text">
    This is a media object example. We can use grid-template-areas to switch
    around the image and text part of the media object.
  </div>
</div>
```

```css
* {
  box-sizing: border-box;
}

.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
}
.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}

.media .image {
  grid-area: img;
  background-color: #ffd8a8;
}

.media .text {
  grid-area: content;
  padding: 10px;
}
```

![image](./images/4.5.1.png)

**元素交换位置**:

- 只需要把网格的 `1fr` 轨道放到后边，把 `grid-template-areas` 里的值调换个位置即可。

```css
.media {
  grid-template-columns: 3fr 1fr;
  grid-template-areas: "content img";
}
```

![image](./images/4.5.2.png)

### 6.网格定义的简写规则

- grid-template: 显式网格简写
  - grid-template-rows
  - grid-template-columns
  - grid-template-areas
- grid: 网格定义简写，这个属性会把 `grid-gap` 属性的值重置为 `0`，而且还不能在简写中设置间距值。
  - grid-template-rows
  - grid-template-columns
  - grid-template-areas
  - grid-auto-rows
  - grid-auto-columns
  - grid-auto-flow

```css
.wrapper {
  display: grid;
  grid-template:
    "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
```

```css
wrapper {
  display: grid;
  grid:
    "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
```

## 五、使用命名线布局

### 1、在定义网格时命名网格线

```css
.wrapper {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
```

```css
.box1 {
  grid-column-start: main-start;
  grid-row-start: main-start;
  grid-row-end: main-end;
}
.box2 {
  grid-column-start: content-end;
  grid-row-start: main-start;
  grid-row-end: content-end;
}
.box3 {
  grid-column-start: content-start;
  grid-row-start: main-start;
}
.box4 {
  grid-column-start: content-start;
  grid-column-end: main-end;
  grid-row-start: content-end;
}
```

```html
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
</div>
```

![image](./images/5.1.png)

**定义多个名字**: `[sidebar-end main-start]`

### 2.由命名线定义的隐式网格区域

[由命名线定义的隐式网格区域](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout/Grid_layout_using_named_grid_lines#%E7%94%B1%E5%91%BD%E5%90%8D%E7%BA%BF%E5%AE%9A%E4%B9%89%E7%9A%84%E9%9A%90%E5%BC%8F%E7%BD%91%E6%A0%BC%E5%8C%BA%E5%9F%9F)

## 六、网格布局中的自动定位

> 默认按行自动定位
> 按列自动定位: `grid-auto-flow: column`

**对于自动定位的项目，如果轨道的大小不适合放入一个项目，这个项目就会被移动到下一行，直至它找到了可以容纳它的空间。**

```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
}
.wrapper div:nth-child(4n + 1) {
  grid-column-end: span 2;
  grid-row-end: span 2;
  background-color: #ffa94d;
}
.wrapper div:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
```

![image](./images/6.1.png)

**填充缺口**:

（百度图片搜索，图片大小不一致，小图片自动填充空隙）

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 10px;
  grid-auto-flow: dense;
}
```

![image](./images/6.2.png)

## 七、网格布局中的盒模型对齐

- align-items: 对齐到块轴
- align-self: 对齐到块轴
- justify-items: 对齐到行轴
- justify-self: 对齐到行轴
- place-items: `align-items` 和 `justify-items` 简写
- place-self: `align-self` 和 `justify-self` 简写

### 1.对齐元素到块轴

```html
<div class="wrapper">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100px;
  gap: 1em;
  align-items: start;
}
```

![image](./images/7.1.png)

### 2.对齐元素到行轴

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100px;
  gap: 1em;
  justify-items: start;
}
```

![image](./images/7.2.png)

### 3.使元素居于区域正中

```html
<div class="wrapper">
  <div class="item">item</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px;
  gap: 1em;
  justify-items: center;
  align-items: center;
}
```

![image](./images/7.3.png)

### 4.对齐网格轨道到块轴

- align-content: 对齐到块轴
- justify-content: 对齐到行轴
- place-content: align-content 和 justify-content 的简写

```html
<div class="wrapper">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</div>
```

```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  height: 500px;
  width: 500px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item3 {
  grid-area: d;
}
```

![image](./images/7.4.1.png)

**align-content: end**：

```css
.wrapper {
  align-content: end;
}
```

![image](./images/7.4.2.png)

**align-content: space-between**：

![image](./images/7.4.3.png)

**与分配空间有关的值会使网格元素变大**：

![image](./images/7.4.4.png)

### 5.对齐网格轨道到行轴

- justify-content

```css
.wrapper {
  justify-content: space-around;
}
```

![image](./images/7.5.png)