CSS3中的display:grid，网格布局介绍

关于 CSS3 中的 display: grid，首先需要了解的是，它是用来进行网格布局的。网格布局是指将一个区域分割成若干个小区域，然后按照一定规则来排列和布局这些小区域。

网格布局的基本概念

在使用 display: grid 布局时，我们需要对以下几个概念进行了解：

• 网格容器（Grid Container）：一个元素如果设置了 display: grid，则成为了网格容器。网格容器是包含了整个网格布局。一个网格容器可以操作多个网格项（即网格单元格）。

• 网格项（Grid Item）：网格容器中每个子元素就是一个网格项。每个网格项可以占据一个或多个网格单元格。

• 网格轨道（Grid Track）：定义网格行或网格列的空间，每个轨道可以是固定大小的或由网格项撑开的。

• 网格线（Grid Line）：网格轨道的起点和终点（即网格线）定义了网格单元格。

• 网格单元格（Grid Cell）：由相邻的四条网格线围成的正方形区域。

网格容器的属性

在使用 display: grid 布局时，网格容器有下列常用属性可用：

• grid-template-rows 和 grid-template-columns：用来定义网格的行和列，可以使用长度单位，百分数或 “fr”（相对长度）。

• grid-template-areas：用来定义网格区域，可以定义多个区域、空白区域，达到不同的布局目的。

• grid-gap：用来定义网格单元格之间的间隔，可以用像素、百分比等单位表示。

• justify-items 和 align-items：用来定义网格项的对齐方式。

• justify-content 和 align-content：用来定义网格容器内容区域在空间方向是否可扩展或对齐方式。

举个例子，下面是一个使用了 display: grid 的网格布局的例子：

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div> 
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 10px;
}

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

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

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

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

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

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

在上面的例子中，我们先将容器设置为网格布局，并使用 grid-template-columns 定义了三个列，使用 grid-template-rows 定义了两个行。接下来，我们通过为每个网格项定义 grid-row 和 grid-column 属性，来指定它们占据哪些行和列。这样就实现了一个基本的网格布局。

网格布局的嵌套

与其他布局方式类似，CSS3 中的 display: grid 布局也可以嵌套在其他布局方式中使用。例如，下面的例子中，我们将一个使用了 display: grid 布局的子容器嵌套在了一个使用了 display: flex 的父容器中，从而实现了更加复杂的布局。

<div class="parent">
  <div class="child">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div> 
    <div class="item-4">4</div>
    <div class="item-5">5</div>
    <div class="item-6">6</div>
  </div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.child {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 10px;
}

/* 网格项的样式同上一个例子 */

在上面的例子中，我们先将父容器设置为 display: flex 布局，并使用 justify-content 和 align-items 属性使其垂直和水平居中。然后将子容器设置为使用了 display: grid 布局，并按照前面例子中的方式进行布局。

以上就是 CSS3 中的 display: grid，网格布局的介绍和使用攻略。希望对您有所帮助。