CSS3 网格容器是使用 display: grid 或 display: inline-grid 创建的容器，它将直接影响容器内的所有子元素（即网格项）的排列。通过设置网格容器的相关属性，我们可以精确控制网格项的排列方式、大小以及对齐方式。

1. 定义网格容器

使用 display: grid 或 display: inline-grid 来创建网格容器。

• display: grid：将容器转为一个块级网格容器，子元素成为网格项。
• display: inline-grid：将容器转为一个行内网格容器，子元素也成为网格项。

示例：创建一个基本网格容器

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 创建三列 */
  grid-gap: 10px; /* 列与列之间的间隙 */
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

2. 网格容器的属性

2.1 grid-template-columns 和 grid-template-rows

grid-template-columns 和 grid-template-rows 用于定义网格的列和行。

• grid-template-columns：定义网格的列数以及每列的宽度。
• grid-template-rows：定义网格的行数以及每行的高度。

这些属性的值可以是固定值、相对值（如 fr）或 auto，以适应内容的大小。

示例：定义网格的行和列

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 定义三列，第二列的宽度是第一列的两倍 */
  grid-template-rows: 100px auto 100px; /* 三行，第一行和第三行高度固定，第二行自适应 */
  grid-gap: 10px;
}

2.2 grid-gap

grid-gap（也可以分别使用 grid-column-gap 和 grid-row-gap）用于设置网格项之间的间距。

• grid-gap：同时设置列间距和行间距。
• grid-column-gap：设置列与列之间的间距。
• grid-row-gap：设置行与行之间的间距。

示例：设置网格项之间的间距

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px; /* 列和行的间距 */
}

2.3 grid-template-areas

grid-template-areas 允许你为网格项分配名称，并通过这些名称来控制网格项的位置。这使得布局更加直观和易读。

• 你可以为网格的每一行和每一列指定一个名称，方便控制位置。

示例：使用网格区域命名

.container {
  display: grid;
  grid-template-columns: 1fr 2fr; 
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

在这个例子中，header、main、sidebar 和 footer 都是网格区域的名称。通过 grid-area 将每个网格项与这些区域对应起来。

2.4 justify-items 和 align-items

这些属性用于控制网格项在网格容器内的对齐方式。

• justify-items：设置网格项在水平方向上的对齐方式。
• align-items：设置网格项在垂直方向上的对齐方式。

它们可以接受的值有：

• start：对齐到起始位置。
• end：对齐到结束位置。
• center：居中对齐。
• stretch（默认值）：拉伸以填满容器。

示例：对齐网格项

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  grid-gap: 10px;
}

2.5 justify-content 和 align-content

这些属性控制整个网格容器内所有网格项的对齐方式。

• justify-content：控制整个网格容器在主轴（水平方向）上的对齐方式。
• align-content：控制整个网格容器在交叉轴（垂直方向）上的对齐方式。

它们可以接受的值与 justify-items 和 align-items 类似，如 start、end、center 和 space-between 等。

示例：对齐整个网格容器

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  justify-content: space-between; /* 水平分散对齐 */
  align-content: center; /* 垂直居中对齐 */
  grid-gap: 10px;
}

3. 网格容器的简写形式

你可以使用 grid-template 属性来简写 grid-template-columns、grid-template-rows 和 grid-template-areas。

示例：简写形式

.container {
  display: grid;
  grid-template: 
    "header header" 100px
    "main sidebar" auto
    "footer footer" 50px;
  grid-gap: 10px;
}

4. 响应式网格容器

你可以结合媒体查询来创建响应式网格容器，根据不同的屏幕尺寸调整网格布局。

示例：响应式网格容器

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr; /* 屏幕宽度小于 768px 时显示两列 */
  }
}

@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr; /* 屏幕宽度小于 480px 时显示一列 */
  }
}

总结

CSS 网格容器是网格布局系统的核心，通过 display: grid 来创建容器，并通过相关属性（如 grid-template-columns、grid-template-rows、grid-gap）来控制网格的结构。结合 grid-template-areas、对齐属性和媒体查询，你可以创建高度灵活且响应式的布局。掌握这些基本的网格容器属性将帮助你更高效地设计页面布局。