CSS实现九宫格布局(自适应)的示例代码

CSS实现九宫格布局(自适应)是一种常见的网页布局方式，下面是完整的攻略。

什么是九宫格布局？

九宫格是一种网页布局方式，将元素分为3x3的九宫格形状，每个格子中放置一个元素。九宫格布局常用于展示网站的产品、服务、图片等内容。

CSS实现九宫格布局的步骤

第一步：HTML结构

首先需要设置HTML结构，要求将元素按照3x3的九宫格形状排列。

<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>

上面的代码将元素包裹在grid-container的容器中，并分别使用grid-item的类名设置每个元素。

第二步：CSS设置

设置CSS样式，包含以下内容：

1. 父容器布局

使用display: grid将容器设为网格布局，使用grid-template-columns: repeat(3, 1fr)设置每行的列数，本例中列数为3。此外，使用grid-gap属性设置列间距和行间距。

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

2. 子元素布局

指定每个子元素的位置，首先需要给每个元素设置grid-column和grid-row属性，表示元素所占的列数和行数。下面是示例代码：

.grid-item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.grid-item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.grid-item:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.grid-item:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.grid-item:nth-child(5) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.grid-item:nth-child(6) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.grid-item:nth-child(7) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.grid-item:nth-child(8) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.grid-item:nth-child(9) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

上面的代码使用nth-child()伪类，对每个元素进行定位。其中，grid-column属性设置了元素所占用的列数，例如：

• 第一个元素占用第一列到第二列，使用grid-column: 1 / 2;表示。
• 第二个元素占用第二列到第三列，使用grid-column: 2 / 3;表示。

grid-row属性同理。

3. 图片居中

如果网页中包含图片，需要设置图片的居中样式，使用以下代码实现：

.grid-item img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}

上面的代码使用margin-left和margin-right的值为auto实现图片居中。使用max-width: 100%和max-height: 100%代码将图片的大小限制在格子内。

至此，九宫格布局的示例代码已经完成。

示例代码

下面是一个简单的九宫格布局示例，包含九个元素和图片，具体代码如下所示：

<div class="grid-container">
  <div class="grid-item">
    <img src="./images/1.jpg"/>
    <p>元素1</p>
  </div>
  <div class="grid-item">
    <img src="./images/2.jpg"/>
    <p>元素2<p>
  </div>
  <div class="grid-item">
    <img src="./images/3.jpg"/>
    <p>元素3</p>
  </div>
  <div class="grid-item">
    <img src="./images/4.jpg"/>
    <p>元素4</p>
  </div>
  <div class="grid-item">
    <img src="./images/5.jpg"/>
    <p>元素5</p>
  </div>
  <div class="grid-item">
    <img src="./images/6.jpg"/>
    <p>元素6</p>
  </div>
  <div class="grid-item">
    <img src="./images/7.jpg"/>
    <p>元素7</p>
  </div>
  <div class="grid-item">
    <img src="./images/8.jpg"/>
    <p>元素8</p>
  </div>
  <div class="grid-item">
    <img src="./images/9.jpg"/>
    <p>元素9</p>
  </div>
</div>

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

.grid-item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
.grid-item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.grid-item:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.grid-item:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.grid-item:nth-child(5) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.grid-item:nth-child(6) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
.grid-item:nth-child(7) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.grid-item:nth-child(8) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.grid-item:nth-child(9) {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.grid-item img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}

示例说明

• 本示例中使用了三张九宫格形状的图片进行展示；
• CSS中将每个元素占用的列数和行数进行了设置，页面中每个元素都处于正确的位置；
• 图片展示的时候使用了CSS实现图片居中的样式；