CSS 网格练习 - CSS

CSS Grid 是 CSS3 中的一种新的布局方式，它可以让我们更方便地制作复杂的网格布局。CSS Grid 采用了网格化布局的方式，在横向和纵向上都可以定义多行和多列，并且支持响应式布局和自适应排版。本文将介绍如何使用 CSS Grid 进行网格练习。

1. CSS Grid 的基本结构

在使用 CSS Grid 进行网格布局之前，我们需要先了解其基本结构。CSS Grid 由一个网格容器（grid container）和若干网格项目（grid item）组成，网格容器用于定义整个布局的结构，而网格项目则用于填充网格容器。

1.1 网格容器的属性

下面是一些常用的网格容器属性：

• display: grid;：将一个元素设置为网格容器。
• grid-template-columns：定义网格容器的列数和列宽。
• grid-template-rows：定义网格容器的行数和行高。
• grid-template-areas：定义网格容器中各个网格项目的位置和大小。
• grid-gap：定义网格之间的间距。

1.2 网格项目的属性

下面是一些常用的网格项目属性：

• grid-column-start：定义网格项目的开始列。
• grid-column-end：定义网格项目的结束列。
• grid-row-start：定义网格项目的开始行。
• grid-row-end：定义网格项目的结束行。
• grid-column：同时定义网格项目的开始列和结束列。
• grid-row：同时定义网格项目的开始行和结束行。
• grid-area：同时定义网格项目的开始行、结束行、开始列、结束列。

2. CSS 网格练习实例

下面将举例介绍如何使用 CSS Grid 进行网格练习。

2.1 等分网格布局

在这个实例中，我们将创建一个等分网格布局，其中每个网格都具有相同的宽度和高度。我们可以使用 repeat 函数来设置网格容器的列数和行数，然后使用 grid-template-columns 和 grid-template-rows 来定义网格容器的列宽和行高。

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

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

<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 class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
</div>

效果如下：

2.2 不等分网格布局

在这个实例中，我们将创建一个不等分网格布局，其中每个网格的宽度和高度都不相同。我们可以使用 grid-template-columns 和 grid-template-rows 属性来分别定义每一列和每一行的宽度和高度。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px 150px;
  grid-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

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

效果如下：

2.3 自适应网格布局

在这个实例中，我们将创建一个自适应网格布局，其中网格项目的宽度和高度会自动适应网格容器的大小。我们可以使用 auto-fit 和 minmax 函数来定义网格容器的列数和列宽，以及行数和行高。

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

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

<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 class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

效果如下：

以上三个实例都是 CSS 网格练习的基本操作，在实践中，我们可以根据实际的需求制作更为复杂的网格布局。希望本文能够对你有所帮助。