CSS Grid 布局

核心知识点讲解

CSS Grid 布局是 CSS3 中引入的一种强大的二维布局系统，它允许你通过行和列来创建复杂的布局结构。与 Flexbox 不同，Grid 布局可以同时控制行和列的布局，非常适合创建整体页面布局和复杂的组件布局。

基本概念

网格容器（Grid Container）：应用 display: grid 或 display: inline-grid 的元素
网格项（Grid Item）：网格容器的直接子元素
网格轨道（Grid Track）：网格中的行或列
网格线（Grid Line）：分隔网格轨道的线
网格单元格（Grid Cell）：由相邻的水平线和垂直线围成的区域
网格区域（Grid Area）：由一个或多个网格单元格组成的区域

定义网格

要创建网格布局，首先需要将元素设置为网格容器：

.container {
  display: grid;
}

然后可以使用以下属性定义网格结构：

grid-template-columns：定义网格列的大小和数量
grid-template-rows：定义网格行的大小和数量
grid-template-areas：定义命名的网格区域
grid-template：grid-template-columns、grid-template-rows 和 grid-template-areas 的简写

常用单位和函数

固定长度单位：px、em、rem 等
百分比：%
弹性单位：fr（网格剩余空间的分数）
**minmax()**：定义最小值和最大值范围
**repeat()**：重复指定的轨道大小模式
**auto-fill/auto-fit**：自动填充可用空间

放置网格项

可以使用以下属性控制网格项的放置：

grid-column-start/grid-column-end：指定网格项的起始和结束列线
grid-row-start/grid-row-end：指定网格项的起始和结束行线
grid-column/grid-row：上述属性的简写
grid-area：指定网格项的网格区域

网格间距

使用以下属性设置网格间距：

grid-column-gap：列之间的间距
grid-row-gap：行之间的间距
grid-gap：上述属性的简写

对齐和分布

可以使用以下属性控制网格项的对齐和分布：

justify-items：水平对齐网格项
align-items：垂直对齐网格项
justify-content：水平分布网格轨道
align-content：垂直分布网格轨道
place-items：justify-items 和 align-items 的简写
place-content：justify-content 和 align-content 的简写

实用案例分析

案例一：基本网格布局

创建一个基本的网格布局，包含不同大小的网格项：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本网格布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 100px 200px 100px;
      grid-gap: 10px;
      max-width: 900px;
      margin: 0 auto;
    }

    .item {
      background-color: #3498db;
      color: white;
      padding: 20px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      font-weight: bold;
    }

    .item-1 {
      grid-column: 1 / 3;
      background-color: #e74c3c;
    }

    .item-2 {
      background-color: #2ecc71;
    }

    .item-3 {
      grid-row: 2 / 4;
      background-color: #f39c12;
    }

    .item-4 {
      background-color: #9b59b6;
    }

    .item-5 {
      background-color: #1abc9c;
    }

    .item-6 {
      background-color: #34495e;
    }
  </style>
</head>
<body>
  <h1>基本网格布局示例</h1>
  <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 class="item item-5">项目 5</div>
    <div class="item item-6">项目 6</div>
  </div>
</body>
</html>

案例二：响应式网格布局

创建一个响应式网格布局，在不同屏幕尺寸下自动调整列数：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式网格布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      grid-gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      background-color: #f4f4f4;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card h3 {
      margin-bottom: 10px;
      color: #333;
    }

    .card p {
      color: #666;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }

    @media (max-width: 480px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <h1>响应式网格布局示例</h1>
  <div class="container">
    <div class="card">
      <h3>卡片 1</h3>
      <p>这是一张使用 CSS Grid 布局的卡片。在不同屏幕尺寸下，网格会自动调整列数。</p>
    </div>
    <div class="card">
      <h3>卡片 2</h3>
      <p>CSS Grid 的 auto-fill 和 minmax() 函数组合可以创建灵活的响应式布局。</p>
    </div>
    <div class="card">
      <h3>卡片 3</h3>
      <p>当屏幕宽度足够大时，网格会显示更多列；当屏幕宽度变小时，列数会自动减少。</p>
    </div>
    <div class="card">
      <h3>卡片 4</h3>
      <p>CSS Grid 是创建响应式布局的强大工具，它比传统的浮动布局更加灵活和直观。</p>
    </div>
    <div class="card">
      <h3>卡片 5</h3>
      <p>通过合理使用网格属性，你可以创建复杂的布局结构，而无需使用大量的嵌套元素。</p>
    </div>
    <div class="card">
      <h3>卡片 6</h3>
      <p>CSS Grid 布局是现代网页设计的重要组成部分，掌握它可以大大提高你的布局能力。</p>
    </div>
  </div>
</body>
</html>

案例三：使用网格区域创建页面布局

使用网格区域创建一个完整的页面布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格区域页面布局</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
    }

    .container {
      display: grid;
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header header"
        "sidebar main aside"
        "footer footer footer";
      grid-gap: 10px;
      min-height: 100vh;
      max-width: 1200px;
      margin: 0 auto;
      padding: 10px;
    }

    header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      padding: 20px;
      border-radius: 8px;
    }

    nav {
      margin-top: 10px;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-right: 20px;
    }

    nav ul li a {
      color: white;
      text-decoration: none;
    }

    .sidebar {
      grid-area: sidebar;
      background-color: #f39c12;
      color: white;
      padding: 20px;
      border-radius: 8px;
    }

    main {
      grid-area: main;
      background-color: #ecf0f1;
      padding: 20px;
      border-radius: 8px;
    }

    aside {
      grid-area: aside;
      background-color: #9b59b6;
      color: white;
      padding: 20px;
      border-radius: 8px;
    }

    footer {
      grid-area: footer;
      background-color: #34495e;
      color: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }

    @media (max-width: 992px) {
      .container {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "main"
          "sidebar"
          "aside"
          "footer";
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>网站标题</h1>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </nav>
    </header>
    <div class="sidebar">
      <h2>侧边栏</h2>
      <ul>
        <li><a href="#" style="color: white;">链接 1</a></li>
        <li><a href="#" style="color: white;">链接 2</a></li>
        <li><a href="#" style="color: white;">链接 3</a></li>
        <li><a href="#" style="color: white;">链接 4</a></li>
      </ul>
    </div>
    <main>
      <h2>主要内容</h2>
      <p>这是网站的主要内容区域。使用 CSS Grid 的网格区域功能，我们可以轻松创建复杂的页面布局。</p>
      <p>网格区域允许我们为布局中的每个部分指定名称，然后通过 grid-template-areas 属性定义它们的位置。</p>
      <p>在响应式设计中，我们可以在媒体查询中重新定义网格区域，以适应不同屏幕尺寸的布局需求。</p>
    </main>
    <aside>
      <h2>边栏</h2>
      <p>这是网站的边栏区域，可以用于显示额外的信息或功能。</p>
    </aside>
    <footer>
      <p>&copy; 2023 网站名称. 保留所有权利.</p>
    </footer>
  </div>
</body>
</html>

总结

CSS Grid 布局是一种强大的二维布局系统，它具有以下优势：

二维布局能力：可以同时控制行和列的布局，而不仅仅是一维的 Flexbox
灵活的网格定义：通过 grid-template-columns 和 grid-template-rows 可以创建复杂的网格结构
强大的网格项放置：可以精确控制每个网格项的位置和大小
响应式设计支持：通过媒体查询和 auto-fill/auto-fit 等功能，可以创建响应式布局
网格区域命名：通过 grid-template-areas 可以创建语义化的布局结构
对齐和分布控制：提供了丰富的对齐和分布属性，确保内容在网格中的正确位置

CSS Grid 布局的应用场景非常广泛，包括：

整体页面布局
卡片网格
表单布局
仪表板设计
图库布局
复杂的组件布局

通过掌握 CSS Grid 布局，你可以创建更加灵活、复杂和响应式的网页布局，提高你的前端开发能力和效率。