CSS Grid 是一个用于在网页上创建复杂布局的强大工具。它允许你创建行列交叉的网格，并在其中放置元素。以下是 CSS Grid 的基本概念和使用方法。

基础概念

网格容器

首先，你需要创建一个网格容器。这可以通过将容器的 display 属性设置为 grid 或 inline-grid 来实现。

.container {
  display: grid;
}

网格线

网格线是网格的组成部分，它们定义了网格的列和行。你可以使用 grid-template-columns 和 grid-template-rows 属性来指定网格的列和行。

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

在上面的例子中，我们创建了一个两列一行的网格，其中第一列占 1 个单位，第二列占 2 个单位。

网格项

网格项是网格中的单个元素。你可以使用 grid-column 和 grid-row 属性来指定元素的位置。

.item1 {
  grid-column: 1;
  grid-row: 1;
}

在上面的例子中，.item1 元素被放置在第一列第一行。

实例

下面是一个简单的示例，展示了如何使用 CSS Grid 创建一个两列一行的布局。

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
</div>

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

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

查看示例

扩展阅读

如果你想要更深入地了解 CSS Grid，以下是一些推荐的资源：

希望这个教程能帮助你入门 CSS Grid。😊