下面是“CSS3网格的三个新特性详解”的完整攻略：

CSS3网格的三个新特性详解

1. 网格容器的定义

在 CSS3 中，我们可以通过定义网格容器来使用网格。定义网格容器的方式是将元素的 display 属性设置为 grid 或 inline-grid。

.container {
  display: grid;
  /* 其他样式属性 */
}

或者是：

.container {
  display: inline-grid;
  /* 其他样式属性 */
}

2. 明确的网格行和列定义

在网格容器内部，我们可以通过 grid-template-rows 和 grid-template-columns 属性来明确定义网格的行和列。这两个属性接收一个以空格分隔的值列表，每个值用于定义一个网格轨道的大小。我们可以使用长度单位（如像素、百分比等），也可以使用自动布局的关键字（如 minmax、auto、fr 等）。

.container {
  display: grid;
  grid-template-rows: 100px 150px 200px; /* 3 行，分别是 100px、150px 和 200px 的高度 */
  grid-template-columns: 1fr 2fr 1fr; /* 3 列，分别占据可用空间的 1/4、1/2 和 1/4 */
  /* 其他样式属性 */
}

3. 网格单元格定位

在网格容器内部，我们可以使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 这四个属性来定位网格单元格。

例如，定位第一行第一列的单元格：

.item {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

或者可以简写为：

.item {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

示例1：

.container {
  display: grid;
  grid-template-rows: 100px 150px;
  grid-template-columns: 2fr 1fr;

  /* 其他样式属性 */
}

.item1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.item2 {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}

在上述示例中，我们定义了一个两行两列的网格容器，其中第一行和第二行分别占据 100px 和 150px，第一列和第二列占据 2/3 和 1/3 的可用空间。同时，我们还定义了两个项，item1 占据第一行第一列的单元格，item2 占据从第一行到第二行的第二列单元格。通过设置网格行和列以及项的定位，我们可以轻松地控制网格的布局。

示例2：

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);

  /* 其他样式属性 */
}

.item1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

.item2 {
  grid-row: 1 / 2;
  grid-column: 2 / 4;
}

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

.item4 {
  grid-row: 2 / 3;
  grid-column: 3 / 5;
}

.item5 {
  grid-row: 3 / 4;
  grid-column: 4 / 5;
}

在上述示例中，我们定义了一个 3 行 4 列的网格容器，每个单元格的尺寸都相等（占据可用空间的 1/3 和 1/4），并且通过设置不同的项的位置来创建了一个复杂的网格布局。这个例子展示了网格的灵活性和强大的布局能力。

希望上述内容能够帮到您理解 CSS3 网格的三个新特性。