使用 CSS Grid 实现基础布局：栅格网格（Grid System）

什么是栅格网格（Grid System）

栅格网格（Grid System）是一种常用的网页布局方式，通过将页面分为多个等宽的列和行，来实现页面元素的排列和布局。栅格网格布局可以让页面看起来更加整齐和美观，同时也有利于响应式设计，使页面在不同设备上都能够良好地展示。

CSS Grid 简介

CSS Grid 是一种基于网格的布局系统，它能够让我们更加灵活地控制页面元素的排列和布局。CSS Grid 可以将页面分为多个网格单元格，通过指定每个单元格的大小和位置，来实现页面的布局。

CSS Grid 的主要特点包括：

• 可以将页面分为多个网格单元格，可以自由指定每个单元格的大小和位置。
• 可以通过网格线（Grid Lines）来控制单元格的位置和大小，网格线可以是垂直线或水平线。
• 可以使用网格区域（Grid Area）来定义多个单元格的组合，从而实现更加复杂的布局。
• 可以使用自动布局（Auto Layout）来自动调整单元格的大小和位置，从而适应不同的设备和屏幕大小。

如何使用 CSS Grid 实现栅格网格布局

使用 CSS Grid 实现栅格网格布局，主要需要以下几个步骤：

1. 定义网格容器（Grid Container）：使用 display: grid 属性来定义一个网格容器，该容器将包含所有的网格单元格。

.container {
  display: grid;
}

1. 定义网格列（Grid Columns）：使用 grid-template-columns 属性来指定网格容器的列数和列宽，可以使用百分比、像素、自适应等多种单位来指定列宽。

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

上面的代码定义了一个包含 12 列的网格容器，每列的宽度都是相等的，可以自适应调整容器的宽度。

1. 定义网格行（Grid Rows）：使用 grid-template-rows 属性来指定网格容器的行数和行高，可以使用百分比、像素、自适应等多种单位来指定行高。

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 100px);
}

上面的代码定义了一个包含 3 行的网格容器，每行的高度都是 100 像素，可以自适应调整容器的高度。

1. 定义网格单元格（Grid Cells）：使用 grid-row 和 grid-column 属性来指定网格单元格的位置和大小，可以使用网格线的编号或名称来指定位置和大小。

// www.javascriptcn.com code example
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 100px);
}
.item {
  grid-row: 1 / 4;
  grid-column: 1 / 7;
}

上面的代码定义了一个占据第一行到第三行、第一列到第七列的网格单元格，可以自由调整单元格的大小和位置。

示例代码

下面是一个使用 CSS Grid 实现栅格网格布局的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Grid 栅格网格布局示例</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-gap: 20px;
      }
      .item {
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        padding: 20px;
      }
      .item-1 {
        grid-row: 1 / 4;
        grid-column: 1 / 7;
      }
      .item-2 {
        grid-row: 1 / 2;
        grid-column: 7 / 13;
      }
      .item-3 {
        grid-row: 2 / 4;
        grid-column: 7 / 10;
      }
      .item-4 {
        grid-row: 2 / 4;
        grid-column: 10 / 13;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
    </div>
  </body>
</html>

在上面的代码中，我们定义了一个包含 12 列、3 行的网格容器，每个单元格的高度为 100 像素，单元格之间的间距为 20 像素。通过指定每个单元格的位置和大小，我们实现了一个简单的栅格网格布局。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d13a9ca941bf7134299c24