【前端】CSS Grid布局介绍及示例 - 指南

CSS Grid 简介

CSS Grid 是一个二维布局系统，专为处理行和列的复杂网页布局而设计。与 Flexbox（一维布局）不同，Grid 允许开发者同时控制行和列，实现更精确的布局结构。

核心概念：
  1. Grid 容器：通过 display: grid 定义。
  2. Grid 项目：容器的直接子元素。
  3. 网格线（Grid Lines）：划分行列的线（从 1 开始编号）。
  4. 网格轨道（Grid Tracks）：行或列的间距（如 grid-template-columns）。
  5. 网格区域（Grid Areas）：合并单元格形成的矩形区域。

关键属性速查

容器属性作用
grid-template-columns定义列宽（如 1fr 200px）
grid-template-rows定义行高
grid-template-areas定义命名区域（配合 grid-area）
gap行列间距（替代 grid-gap）
justify-items项目水平对齐（start/end/center）
align-items项目垂直对齐
项目属性作用
grid-column-start/end控制列起始/结束位置
grid-row-start/end控制行起始/结束位置
grid-area指定项目所属命名区域
justify-self单个项目水平对齐
align-self单个项目垂直对齐

何时使用 Grid？

  • 整体页面布局（Header/Footer/Sidebar 等区域）
  • 二维复杂结构（同时控制行和列）
  • 响应式网格系统（如卡片、画廊布局）

Tips：
Grid 与 Flexbox 可协同使用！Grid 负责宏观布局，Flexbox 处理微观组件（如导航栏内部对齐）。

示例合集（含完整代码）

示例 1：基础网格布局
<!DOCTYPE html>
  <html>
    <head>
      <style>
        .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 三列等宽 */
        grid-gap: 10px;
        padding: 15px;
        background: #f0f0f0;
        }
        .grid-item {
        background: #4CAF50;
        color: white;
        padding: 30px;
        text-align: center;
        border-radius: 5px;
        }
      </style>
    </head>
    <body>
        <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>
    </body>
  </html>
示例 2：网格区域命名布局
<!DOCTYPE html>
  <html>
    <head>
      <style>
        .container {
        display: grid;
        grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
        grid-gap: 10px;
        height: 300px;
        }
        .header {
        grid-area: header;
        background: #FF9800;
        padding: 20px;
        }
        .sidebar {
        grid-area: sidebar;
        background: #2196F3;
        }
        .main {
        grid-area: main;
        background: #4CAF50;
        }
        .footer {
        grid-area: footer;
        background: #9C27B0;
        }
      </style>
    </head>
    <body>
        <div class="container">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main Content</div>
      <div class="footer">Footer</div>
      </div>
    </body>
  </html>
示例 3：响应式自适应网格
<!DOCTYPE html>
  <html>
    <head>
      <style>
        .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        padding: 20px;
        }
        .item {
        background: #2196F3;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        border-radius: 8px;
        }
      </style>
    </head>
    <body>
        <div class="grid">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      </div>
    </body>
  </html>
示例 4：复杂定位与对齐
<!DOCTYPE html>
  <html>
    <head>
      <style>
        .grid {
        display: grid;
        grid-template-columns: 150px 1fr 100px;
        grid-template-rows: 100px 1fr 100px;
        height: 400px;
        background: #eee;
        gap: 10px;
        padding: 10px;
        }
        .item-a {
        grid-column: 1 / 4;
        /* 跨3列 */
        background: #FF5722;
        display: grid;
        place-items: center;
        }
        .item-b {
        grid-row: 2 / 4;
        /* 跨2行 */
        background: #3F51B5;
        }
        .item-c {
        grid-column: 2 / 4;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        }
        .sub-item {
        background: #009688;
        display: flex;
        align-items: center;
        justify-content: center;
        }
      </style>
    </head>
    <body>
        <div class="grid">
      <div class="item-a">Header (跨3列)</div>
      <div class="item-b">Sidebar (跨2行)</div>
          <div class="item-c">
        <div class="sub-item">内容1</div>
        <div class="sub-item">内容2</div>
        <div class="sub-item">内容3</div>
        <div class="sub-item">内容4</div>
        </div>
      </div>
    </body>
  </html>

关键概念解析

  1. 容器属性：

    • display: grid：定义网格容器
    • grid-template-columns/rows：定义列/行尺寸
    • gap：设置网格间距
    • grid-template-areas：命名网格区域

  2. 项目属性：

    • grid-column/row：控制项目位置
    • grid-area：指定区域名称
    • justify-self/align-self：单个项目对齐

  3. 响应式单位：

    • fr：剩余空间分配单位
    • minmax()：定义尺寸范围
    • auto-fill：自动填充列

CSS Grid 彻底改变了网页布局方式，通过组合这些特性，可以轻松实现传统布局难以完成的复杂设计。

posted @ 2025-08-18 12:44  yjbjingcha  阅读(49)  评论(0)    收藏  举报