【CSS】Grid 布局基础知识及实例展示

CSS Grid 布局（Grid Layout）是一种二维网格布局系统，专为满足现代网页设计需求而创建。与 Flexbox（一维布局模型）不同，Grid 能够同时处理行和列，使你可以更高效地设计复杂的网页布局。下面我将从基础到高级详细讲解 Grid 布局，并提供相应示例。

基础概念

1. 容器与项目

网格容器（Grid Container） ：通过 display: grid 或 display: inline-grid 定义的元素，是所有网格项目的父元素。
网格项目（Grid Item）：网格容器的直接子元素。

2. 网格线（Grid Lines）

分隔网格轨道的分界线，可以是垂直的（列线）或水平的（行线）。网格线从 1 开始编号。

3. 网格轨道（Grid Tracks）

网格中的行或列，由 grid-template-rows 和 grid-template-columns 定义。

4. 网格单元格（Grid Cell）

两个相邻行线和两个相邻列线之间的空间，是网格的最小单位。

5. 网格区域（Grid Area）

由一个或多个网格单元格组成的矩形区域，通过 grid-template-areas 定义。

如下图：

基本用法

创建网格容器

使用 display: grid 或 display: inline-grid 将元素转换为网格容器：

css

复制代码

.container {
  display: grid; /* 块级网格 */
  /* display: inline-grid; 行内级网格 */
}

定义网格轨道

使用 grid-template-rows 和 grid-template-columns 定义行和列的大小（如下图）：

css

复制代码

.container {
  grid-template-columns: 100px 200px 150px; /* 三列，宽度分别为 100px、200px、150px */
  grid-template-rows: 50px 100px; /* 两行，高度分别为 50px、100px */
}

重复轨道模式

使用 repeat() 函数简化重复的轨道定义（如下图）：

css

复制代码

.container {
  grid-template-columns: repeat(3, 100px); /* 等同于 100px 100px 100px */
  grid-template-rows: repeat(2, 50px); /* 等同于 50px 50px */
}

灵活的尺寸单位：fr

fr 单位表示网格容器剩余空间的比例（如下图）：

css

复制代码

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列宽度是两边的两倍 */
}

网格间距

使用 gap 属性设置网格轨道之间的间距：

css

复制代码

.container {
  gap: 10px; /* 行和列间距均为 10px */
  /* 等价于：
  row-gap: 10px;
  column-gap: 10px;
  */
}

网格项目定位

基于网格线定位

使用 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 指定项目的位置：

css

复制代码

.item {
  grid-column-start: 1;
  grid-column-end: 3; /* 从第1列线开始，到第3列线结束 */
  grid-row-start: 1;
  grid-row-end: 2; /* 从第1行线开始，到第2行线结束 */
}

简写形式：

css

复制代码

.item {
  grid-column: 1 / 3; /* 列开始 / 列结束 */
  grid-row: 1 / 2; /* 行开始 / 行结束 */
}

使用 span 关键字跨越网格线：

css

复制代码

.item {
  grid-column: 1 / span 2; /* 从第1列线开始，跨越2个轨道 */
  grid-row: 1 / span 1; /* 从第1行线开始，跨越1个轨道 */
}

网格区域定位

使用 grid-template-areas 定义区域名称，并通过 grid-area 将项目放入特定区域：

css

复制代码

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 50px 200px 50px;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

高级特性

隐式与显式网格

显式网格 ：通过 grid-template-rows 和 grid-template-columns 定义的轨道。
隐式网格：当项目超出显式网格范围时，自动创建的轨道。

使用 grid-auto-rows 和 grid-auto-columns 控制隐式网格轨道的大小：

css

复制代码

.container {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px; /* 隐式创建的行高为 100px */
}

自动放置算法

使用 grid-auto-flow 控制自动放置项目的方式：

css

复制代码

.container {
  grid-auto-flow: column; /* 项目按列排列，默认是 row */
}

对齐与分布

内容对齐：控制整个网格在容器中的位置

css

复制代码

.container {
  justify-content: center; /* 水平居中 */
  align-content: center; /* 垂直居中 */
}

项目对齐：控制单个项目在其单元格中的位置

css

复制代码

.item {
  justify-self: center; /* 水平居中 */
  align-self: center; /* 垂直居中 */
}

轨道分布：控制剩余空间在轨道间的分布

css

复制代码

.container {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充，每列最小 100px，最大 1fr */
}

实际示例

下面是一个使用 CSS Grid 实现的响应式网页布局示例：

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Example</title>
  <style>
    .container {
      display: grid;
      grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
      grid-template-columns: 200px 1fr 1fr;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
      gap: 10px;
      padding: 10px;
    }

    .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      padding: 10px;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: #2ecc71;
      padding: 10px;
    }

    .main {
      grid-area: main;
      background-color: #f1c40f;
      padding: 10px;
    }

    .footer {
      grid-area: footer;
      background-color: #9b59b6;
      color: white;
      padding: 10px;
    }

    /* 响应式布局 */
    @media (max-width: 600px) {
      .container {
        grid-template-areas:
          "header"
          "sidebar"
          "main"
          "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="main">Main Content</main>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

这个示例展示了一个常见的三栏布局，在小屏幕上自动转换为单列布局。通过 CSS Grid，我们可以轻松实现复杂的响应式设计，而不需要依赖浮动或定位。

CSS Grid 是一个功能强大的布局工具，掌握它可以让你更高效地创建现代、灵活的网页设计。建议通过实际练习来加深理解，尝试不同的属性组合，探索 Grid 布局的无限可能。