CSS 网格 - 深入探讨

第 9 讲：CSS 网格 - 深入探讨

欢迎来到《从基础到辉煌》课程第九讲。在本次讲座中，我们将探索 CSS 网格，这是一个强大的布局系统，可让您轻松创建复杂的网页布局。虽然 Flexbox 非常适合单维布局（行或列），但 CSS Grid 提供了二维布局系统，使您能够同时控制行和列。

---

什么是 CSS 网格？

CSS 网格是 CSS 中的布局系统，可以创建灵活的、响应式的、基于网格的布局。它允许您将元素对齐到行和列中，比 Flexbox 提供更多对布局结构的控制。

---

网格术语

在深入示例之前，让我们先熟悉一些关键术语：

• 网格容器：包含网格的父元素。
• 网格项：网格容器内的子元素。
• 网格线：网格的水平和垂直分割线。
• 网格轨道：两条网格线之间的空间，形成行或列。
• 网格单元：由行和列相交形成的网格中最小的单个单元。

---

1.基本网格结构

要开始使用 Grid，请将 display: grid 应用到容器。

• 示例：

  .grid-container {
    display: grid;
  }

一旦应用了display: grid，容器的子元素就成为网格项。

---

2.定义网格列和行

您可以使用 grid-template-columns 和 grid-template-rows 属性定义网格的行数和列数。

• 示例：创建一个 3 列 2 行的网格。

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }

这将创建一个网格：

• 3 列：第一列宽 100px，第二列宽 200px，第三列宽 100px。
• 2 行：第一行高 50 像素，第二行高 150 像素。

---

3.使用小数单位 (fr)

CSS Grid 引入了分数单位 fr，它表示网格容器中可用空间的一小部分。这是在网格项之间分配空间的灵活方式。

• 示例：使用 fr 平均划分空间。

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

在此示例中，三列将具有相等的宽度，每列占用可用空间的一小部分。

---

4.放置网格项目

您可以使用 grid-column 和 grid-row 属性控制每个网格项的放置位置。这些属性允许您指定项目的开始和结束位置。

• 示例：

  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }

在这种情况下，网格项将跨越前两列，但会放置在第一行。

---

5.网格间隙

grid-gap 属性在水平和垂直方向的网格项之间添加空间。

• 示例：在列和行之间添加间隙。

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

这会在所有网格项之间创建相等的 20px 间隙。

---

6.自动调整和自动填充

自动调整和自动填充是强大的功能，允许网格根据容器的大小自动放置尽可能多的列。

• 自动调整示例：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

在这里，网格将自动适应尽可能多的列，确保每列至少 100 像素宽，但可以增长以填充可用空间。

---

实际示例：简单的网格布局

让我们使用 CSS Grid 创建一个简单的网格布局。

HTML:

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

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

在此示例中：

• .grid-container 具有使用 Repeat(3, 1fr) 创建的三个等宽列。
• 网格间隙设置为 10px 以在网格项之间添加空间。
• 每个 .grid-item 都应用了填充和背景颜色，以提高可见性。

---

7.嵌套网格

您还可以嵌套网格，其中网格项本身成为网格容器。这允许更复杂的布局。

• 示例：

  .nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

您可以应用此概念在另一个网格内创建一个网格，以便更精细地控制您的布局。

---

Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

• Example: Creating a responsive grid.

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }

In this example:

• The grid starts with three columns.
• On screens smaller than 768px, the grid switches to two columns.
• On screens smaller than 480px, the grid collapses to a single column.

---

Practice Exercise

1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
2. Use grid-template-columns and grid-template-rows to define the grid structure.
3. Make the layout responsive by adjusting the number of columns on different screen sizes.

---

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!

---

Follow Me on LinkedIn-

Ridoy Hasan

以上是CSS 网格 - 深入探讨的详细内容。更多信息请关注PHP中文网其他相关文章！