HTML 如何通过CSS创建一个3×3的网格

在本文中，我们将介绍如何使用CSS来创建一个3×3的网格。网格布局在前端开发中非常常见，它可以用于展示图片、文本和其他元素。通过以下步骤，您可以轻松地创建一个漂亮的3×3网格。

阅读更多：HTML 教程

步骤 1：HTML 结构

首先，我们需要为网格创建一个HTML结构。在body标签中，创建一个div容器，并给它一个类名，例如”grid-container”。在该div中，创建9个子div，并为每个子div添加一个类名，例如”grid-item”。

示例代码如下：

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

步骤 2：CSS 样式

接下来，我们需要为网格应用CSS样式。首先，为”grid-container”添加以下样式：

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

上述代码中，我们使用了display: grid来定义元素为网格布局。grid-template-columns属性定义了网格的列数和宽度。在这个例子中，我们使用了repeat(3, 1fr)，表示网格有3列，每列的宽度都为1分数单位。grid-gap属性定义了网格中每个单元格之间的间隔。

然后，为”grid-item”添加以下样式：

.grid-item {
  background-color: #eaeaea;
  height: 100px;
}

上述代码中，我们为每个网格项设置了一个背景颜色和固定的高度。

步骤 3：添加内容

现在，我们已经定义了网格的结构和样式，接下来我们可以向每个网格中添加内容。您可以在每个子div中添加文本、图像或其他元素。

示例代码如下：

<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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>