CSS 网格容器 (Grid Container)

CSS 网格容器是一个元素，设置了 display: grid 或 display: inline-grid，它作为 CSS 网格布局的父容器。所有子元素都会被作为网格项（Grid Items）放置在该容器内，根据网格系统的规则进行布局。

通过使用网格容器，你可以创建复杂的二维布局。以下是 CSS 网格容器的基本概念和用法。

1️⃣ 基本语法

.container {
  display: grid; /* 或者 display: inline-grid */
}
  • display: grid：将元素指定为网格容器，适用于块级布局。
  • display: inline-grid：将元素指定为网格容器，适用于内联布局。

2️⃣ 网格容器的属性

网格容器通过设置以下属性来定义网格的布局方式：

1. grid-template-columns

定义网格容器的列结构。

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}
  • 这将创建一个包含三列的网格，第一列宽度为 100px，第二列为 200px，第三列为 100px。

2. grid-template-rows

定义网格容器的行结构。

.container {
  display: grid;
  grid-template-rows: 100px 200px;
}
  • 这将创建一个包含两行的网格，第一行高度为 100px，第二行高度为 200px。

3. grid-template-areas

用于创建网格布局的命名区域，使布局更加可读和可维护。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-template-areas:
    "header header header"
    "main main sidebar"
    "footer footer footer";
}
  • grid-template-areas 允许你为网格的区域命名，使布局变得直观。通过这种方式，你可以定义多个区域，例如 header, main, sidebar 等。

4. grid-gap

设置网格项之间的间距，既可以设置列间距，又可以设置行间距。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;  /* 行列间距都为 10px */
}

你也可以单独设置行和列的间距：

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-column-gap: 10px;  /* 设置列之间的间距 */
  grid-row-gap: 20px;     /* 设置行之间的间距 */
}

5. grid-auto-columns 和 grid-auto-rows

这些属性用于定义自动生成的列和行的大小。如果你没有明确指定某些列或行的大小，它们将根据这些属性自动生成。

.container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-rows: 50px;  /* 自动生成的行的高度为 50px */
}

6. grid-auto-flow

控制网格项的填充顺序。它决定了网格项是按照行或列来放置的，或者使用默认的填充方式。

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-flow: row; /* 按行填充 */
}
  • grid-auto-flow: row（默认）表示按行填充。
  • grid-auto-flow: column 表示按列填充。

7. justify-items 和 align-items

这两个属性用于设置网格项在网格单元格中的对齐方式。

  • justify-items：控制网格项在水平方向上的对齐。
  • align-items：控制网格项在垂直方向上的对齐。
.container {
  display: grid;
  justify-items: center; /* 水平居中对齐 */
  align-items: center;   /* 垂直居中对齐 */
}

3️⃣ 创建网格容器的布局例子

HTML 结构：

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
  <div class="item5">Item 5</div>
</div>

CSS：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 三列，均分宽度 */
  grid-template-rows: repeat(2, 100px);  /* 两行，100px 高 */
  grid-gap: 10px;  /* 行列之间的间距 */
}

.item1 {
  background-color: lightblue;
}

.item2 {
  background-color: lightgreen;
}

.item3 {
  background-color: lightcoral;
}

.item4 {
  background-color: lightgoldenrodyellow;
}

.item5 {
  background-color: lightpink;
}

效果说明：

  • 网格容器 .container 有三列和两行，网格项之间有 10px 的间距。
  • 每个网格项都有不同的背景色，布局是根据容器的定义来自动排列的。

4️⃣ 使用 grid-template-areas

通过使用 grid-template-areas，可以更具可读性地安排布局：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header {
  background-color: lightblue;
  grid-area: header;
}

.sidebar {
  background-color: lightgreen;
  grid-area: sidebar;
}

.main {
  background-color: lightcoral;
  grid-area: main;
}

.footer {
  background-color: lightgoldenrodyellow;
  grid-area: footer;
}

效果说明：

  • 使用 grid-template-areas 可以通过给区域命名使布局更加清晰和直观。
  • 每个网格项通过 grid-area 属性与对应的区域匹配，形成了易于理解的布局结构。

5️⃣ 总结

CSS 网格容器是实现复杂布局的关键，它使得网页布局更加灵活和简洁。通过设置 display: grid 并定义列、行、区域等，可以轻松控制元素在页面上的排列方式。结合网格项的定位和对齐功能，你可以实现响应式和动态布局，适用于各种设备屏幕。