Grid 布局详细总结

1. 基本概念

容器 (Grid Container): 使用 display: grid; 的元素就是网格容器，它包含所有的网格项目。 项目 (Grid Item): 容器内的直接子元素称为网格项目，应用网格布局属性。 轨道 (Grid Track): 水平方向的轨道是行 (row)，垂直方向的轨道是列 (column)。 单元格 (Grid Cell): 行和列交叉形成的区域，称为单元格。 网格线 (Grid Line): 每一行和列的分隔线，称为网格线，可以通过行号和列号定位元素。

2. 定义网格布局

通过 grid-template-columns 和 grid-template-rows 定义行和列

指定容器的列和行结构：

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;  /* 三列布局 */
  grid-template-rows: 50px auto;           /* 两行布局 */
}

• 100px、200px 表示固定列宽。
• 1fr 是一种弹性单位，表示分配剩余空间。
• auto 行高自适应内容。
• 网格间隙 gap

gap 设置行和列之间的间隙：

.container {
  gap: 10px;  /* 设置行列间的间隙 */
}

或者分别设置行和列的间隙：

.container {
  row-gap: 10px;
  column-gap: 20px;
}

网格项目的放置

可以用网格线定位项目的位置和大小。

grid-column 和 grid-row 指定项目所占的行和列：

.item1 {
  grid-column: 1 / 3;  /* 从第 1 列跨到第 3 列 */
  grid-row: 1 / 2;     /* 从第 1 行跨到第 2 行 */
}

• grid-column 和 grid-row 指定项目从哪一条网格线开始到哪一条网格线结束。
• grid-column-start、grid-column-end、grid-row-start、grid-row-end

可以分别指定起始和结束的行或列网格线：

复制代码
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

grid-area

grid-area 可直接指定项目的行和列位置，简写为：grid-row-start / grid-column-start / grid-row-end / grid-column-end。

复制代码
.item1 {
  grid-area: 1 / 1 / 2 / 3;
}

重复 (repeat) 和最小最大 (minmax) 单位

repeat 函数 使用 repeat() 简化重复的行或列定义：

复制代码
.container {
  grid-template-columns: repeat(3, 1fr);  /* 创建 3 列，宽度均为 1fr */
}

minmax 函数 minmax() 用于定义列或行的最小和最大尺寸：

复制代码
.container {
  grid-template-columns: minmax(100px, 1fr);  /* 列宽在 100px 到 1fr 之间自适应 */
}

自动排列网格项目

auto-fill 和 auto-fit 结合 repeat 实现自适应列的网格布局：

auto-fill: 尽可能多地填充列，即使某些列为空。 auto-fit: 填满容器后会缩放项目，以填充剩余空间。

复制代码
.container {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

对齐和分布

在容器中对齐

• justify-items: 控制项目在列方向的对齐方式。
• align-items: 控制项目在行方向的对齐方式。
• place-items: 同时设置 align-items 和 justify-items。

复制代码
.container {
  place-items: center;  /* 项目居中对齐 */
}

在容器内分布

• justify-content: 控制整个网格在容器内的水平方向分布。
• align-content: 控制整个网格在容器内的垂直方向分布。
• place-content: 同时设置 align-content 和 justify-content。

复制代码
.container {
  place-content: center;  /* 整个网格居中 */
}

网格模板区域

可以命名网格的区域，用 grid-template-areas 生成布局：

复制代码
.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

这种方法简化了布局定义，尤其适用于较复杂的页面结构。