ACCUMULATE(累积)

display: grid 是一种强大的 CSS 布局模式，用于创建二维布局。与 display: flex 主要在单轴上（水平或垂直）排列不同，grid 能够同时控制行和列，是制作复杂的多列多行排版的理想选择，适用于照片画廊、产品展示页面等布局。

以下是 display: grid 的详细说明。

1. 基本概念

Grid Container（网格容器）：当一个元素设置了 display: grid，它就成为一个“网格容器”。它的直接子元素称为“网格子项”。
Grid Items（网格子项）：网格容器中的直接子元素。这些子元素的排布可以通过设置行和列来控制。

2. 网格线、网格单元格和网格区域

网格线 (Grid Lines)：在容器中划分行和列的线条，用于定位子项的排列。
网格单元格 (Grid Cell)：网格线之间的矩形区域，即单个子项占据的位置。
网格区域 (Grid Area)：由多个网格单元格组合成的矩形区域，可以用于放置一个网格子项。

3. 容器属性

基础布局

grid-template-columns 和 grid-template-rows

定义网格的列和行的数量及宽度/高度。
可以使用像素、百分比、fr（比例单位），auto（自动适应内容）等单位。

示例：

css

.container {
  display: grid;
  grid-template-columns: 100px 200px auto; /* 第一列宽100px，第二列200px，第三列自适应 */
  grid-template-rows: 1fr 2fr; /* 两行，分别占1:2的比例 */
}

grid-template-areas

将网格划分为命名的区域，使布局更直观、语义化。
每个区域可以用字符串表示，用名字指定子项的布局。

示例：

css

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

间距与对齐

gap、row-gap、column-gap

设置网格子项之间的间距。

示例：

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 行与列的间距都是10px */
  row-gap: 20px; /* 行间距20px */
  column-gap: 15px; /* 列间距15px */
}

align-items 和 justify-items
- align-items 控制子项在单元格内的垂直对齐方式，justify-items 控制水平对齐方式。
- 取值包括：start、end、center、stretch（默认值）。
- 示例：
  css
```
.container {
  display: grid;
  align-items: center; /* 所有子项在垂直方向上居中 */
  justify-items: start; /* 所有子项在水平方向上靠左对齐 */
}
```
align-content 和 justify-content
- 当网格总尺寸小于容器时，用来控制网格整体在容器内的对齐方式。
- 适用于多行多列布局，取值包括：start、end、center、space-between、space-around、stretch。
- 示例：
  css
```
.container {
  display: grid;
  align-content: space-between; /* 各行之间的间距平均分布 */
  justify-content: center; /* 网格整体水平居中 */
}
```

4. 子项属性

grid-column 和 grid-row

控制子项跨列或跨行的范围。通常写法是 start / end，即从某行（列）开始，到某行（列）结束。

示例：

css

.item1 {
  grid-column: 1 / 3; /* 从第一列开始，到第三列结束，跨两列 */
  grid-row: 1 / 2; /* 从第一行开始，到第二行结束，跨一行 */
}

grid-area
- 直接指定子项的命名区域，简化布局。适用于已定义 grid-template-areas 的情况。
- 示例：
  css
```
.item1 {
  grid-area: header; /* 匹配命名区域 "header" */
}
```
place-self
- 控制单个子项的水平和垂直对齐方式，覆盖 align-items 和 justify-items 的设置。
- 示例：
  css
```
.item1 {
  place-self: center start; /* 垂直居中，水平从左对齐 */
}
```

5. 响应式布局与高级用法

repeat() 函数：重复指定列或行的设置。

css

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列等宽 */
}

minmax() 函数：设置列或行的最小值和最大值。

css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 自适应屏幕大小 */
}

自动布局 (auto-fill 和 auto-fit)：用于创建响应式布局，适应不同的屏幕宽度。
- auto-fill 会将子项填充至容器宽度，即使有空白格子。
- auto-fit 会让子项自适应容器宽度，不会留空白格子。

6. 实际应用

画廊布局：排列图片或内容项，适用于照片展示、产品展示等。
复杂的网页布局：如头部、导航栏、侧边栏、主内容区、页脚等区域。
响应式设计：配合 minmax() 和 auto-fill，创建自适应不同设备的网格布局。

希望这个说明帮助你更好地理解和使用 display: grid 来创建灵活的网页布局！

1. 基本概念 ​

2. 网格线、网格单元格和网格区域 ​

3. 容器属性 ​

基础布局 ​

间距与对齐 ​

4. 子项属性 ​

5. 响应式布局与高级用法 ​

6. 实际应用 ​