CSS Grid 是一种用于在网页上创建复杂布局的强大工具。它允许开发者创建具有多列和行的网格系统，使得网页布局更加灵活和强大。

基本概念

CSS Grid 允许你定义一个网格容器，并将子元素放置在这个网格容器内。每个网格容器可以包含多个网格项，这些网格项可以跨越多个行和列。

  • 网格容器（Grid Container）：使用 display: grid; 或 display: inline-grid; 声明的元素。
  • 网格项（Grid Item）：网格容器的子元素。

创建网格

要创建一个网格，首先需要设置一个网格容器。以下是一个简单的网格容器示例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
  grid-template-rows: auto auto auto; /* 三行自动高度 */
}

放置网格项

网格项可以通过以下方式放置在网格容器中：

  • 使用 grid-column 和 grid-row 属性指定网格项的位置。
  • 使用 grid-area 属性指定网格项的位置和大小。

以下是一个网格项的示例：

.item1 {
  grid-column: 1 / 3; /* 从第一列开始，跨越两列 */
  grid-row: 1 / 3; /* 从第一行开始，跨越两行 */
}

网格对齐

CSS Grid 提供了多种对齐方式，包括：

  • 对齐行和列：使用 align-items 和 justify-items 属性。
  • 对齐网格项：使用 align-self 和 justify-self 属性。

例如，要使所有网格项在垂直方向上居中，可以使用以下样式：

.container {
  align-items: center; /* 垂直居中 */
}

扩展阅读

想要了解更多关于 CSS Grid 的知识，可以阅读以下教程：

希望这个基础教程能帮助你入门 CSS Grid！🌟