CSS中的Grid 布局

xiaotao1312026-04-14 11:27

Grid 布局基础概念

1. 什么是 Grid 布局

CSS Grid 布局（网格布局）是一种二维布局系统，可以同时控制行和列。

复制代码 
传统布局 vs Grid布局
┌─────────────────┐     ┌─────────────────┐
│ 列1 │ 列2 │ 列3 │     │ ┌───┬───┬───┐ │
├─────────────────┤     │ │ 1 │ 2 │ 3 │ │
│ 行1 │ 行2 │ 行3 │     │ ├───┼───┼───┤ │
└─────────────────┘     │ │ 4 │ 5 │ 6 │ │
    Flex 一维           │ ├───┼───┼───┤ │
                        │ │ 7 │ 8 │ 9 │ │
                        │ └───┴───┴───┘ │
                        └─────────────────┘
                            Grid 二维

2. 核心概念

2.1 Grid 容器

html 复制代码 
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

2.2 Grid 项目

html 复制代码 
<div class="grid">
  <div>这是 Grid 项目</div>
  <div>这是 Grid 项目</div>
</div>

2.3 网格线

复制代码 
行网格线:        列网格线:
  ┌───┬───┐        ┌───┬───┐
1 │   │   │      1│   │   │
  ├───┼───┤        ├───┼───┤
2 │   │   │      2│   │   │
  └───┴───┘        └───┴───┘
  行号 1,2,3       列号 1,2,3

2.4 网格轨道

  • 列轨道：垂直方向的网格线之间的空间
  • 行轨道：水平方向的网格线之间的空间

2.5 网格单元格

行和列交叉的区域，一个单元格就是一个 Grid 项目的位置。

2.6 网格区域

由多个单元格组成的矩形区域。

3. 启用 Grid 布局

css 复制代码 
.container {
  display: grid;
}

3.1 基础示例

html 复制代码 
<style>
  .grid {
    display: grid;
    gap: 10px;
    background: #f0f0f0;
  }
  .item {
    background: #3b82f6;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 8px;
  }
</style>

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

4. 定义网格结构

4.1 grid-template-columns

定义列的数量和宽度：

css 复制代码 
/* 3列，每列 100px */
.grid {
  grid-template-columns: 100px 100px 100px;
}

/* 3列，使用 fr 单位（比例）*/
.grid {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 混合单位 */
.grid {
  grid-template-columns: 100px 1fr 2fr;
}

/* repeat() 函数 */
.grid {
  grid-template-columns: repeat(3, 1fr);
}

/* minmax() 函数 */
.grid {
  grid-template-columns: minmax(100px, 1fr) 1fr 1fr;
}

/* auto 关键字 */
.grid {
  grid-template-columns: auto 1fr auto;
}

4.2 grid-template-rows

定义行的数量和高度：

css 复制代码 
/* 3行，每行 100px */
.grid {
  grid-template-rows: 100px 100px 100px;
}

/* 自动高度 */
.grid {
  grid-template-rows: auto auto auto;
}

/* 混合单位 */
.grid {
  grid-template-rows: 100px 1fr 2fr;
}

4.3 完整示例

html 复制代码 
<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
  }
</style>

<div class="grid">
  <div class="item">列1行1</div>
  <div class="item">列2行1</div>
  <div class="item">列3行1</div>
  <div class="item">列1行2</div>
  <div class="item">列2行2</div>
  <div class="item">列3行2</div>
</div>

5. fr 单位详解

fr（fraction）表示剩余空间的分配比例。

css 复制代码 
/* 剩余空间分成 3 份，第1列占1份，第2列占2份 */
.grid {
  grid-template-columns: 1fr 2fr;
}

计算方式：

  • 总宽度 = 800px
  • 固定宽度元素 = 100px
  • 剩余空间 = 700px
  • 1fr = 700px / (1+2) = 233.33px
  • 第1列 = 233.33px
  • 第2列 = 466.67px

6. repeat() 函数

简化重复定义：

css 复制代码 
/* 3列等宽 */
.grid {
  grid-template-columns: repeat(3, 1fr);
}

/* 重复模式 */
.grid {
  grid-template-columns: repeat(2, 100px 200px);
  /* 等价于: 100px 200px 100px 200px */
}

/* auto-fill 和 auto-fit */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

7. minmax() 函数

设置最小和最大尺寸：

css 复制代码 
/* 每列最小 100px，最大 1fr */
.grid {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

/* 响应式布局 */
.grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

8. 间距

8.1 gap

设置行和列之间的间距：

css 复制代码 
.grid {
  gap: 20px;        /* 行列间距都是 20px */
  row-gap: 20px;    /* 只设置行间距 */
  column-gap: 10px; /* 只设置列间距 */
}

8.2 示例

html 复制代码 
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
</style>

9. 练习

练习 1：创建 3x3 网格

创建一个 3 行 3 列的网格，每个单元格 100x100px。

参考答案：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}

练习 2：响应式网格

创建一个响应式网格，手机版 1 列，平板 2 列，电脑 4 列。

参考答案：

css 复制代码 
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

练习 3：使用 minmax 的响应式网格

一行代码实现响应式网格：

参考答案：

css 复制代码 
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

10. 总结

属性 作用 示例
display: grid 启用 Grid display: grid
grid-template-columns 定义列 repeat(3, 1fr)
grid-template-rows 定义行 100px 200px
gap 间距 20px
fr 单位 比例分配 1fr 2fr
repeat() 重复模式 repeat(3, 1fr)
minmax() 最小最大尺寸 minmax(100px, 1fr)

Grid 布局：项目放置

1. 概述

创建网格后，需要将项目放置到网格中。Grid 提供了多种放置方式，可以精确控制每个项目的位置和大小。

复制代码 
网格线编号:
    列线 1   列线 2   列线 3   列线 4
    ↓        ↓        ↓        ↓
行线1 → ┌───┬───┬───┐
        │   │   │   │
行线2 → ├───┼───┼───┤
        │   │   │   │
行线3 → ├───┼───┼───┤
        │   │   │   │
行线4 → └───┴───┴───┘

2. 网格线编号

Grid 的网格线从 1 开始编号：

复制代码 
列线: 1   2   3   4
行线: 1
     2
     3
     4

2.1 使用网格线放置

css 复制代码 
/* 从第2列线开始，到第4列线结束 */
.item {
  grid-column-start: 2;
  grid-column-end: 4;
}

2.2 简写属性

css 复制代码 
/* grid-column: start / end */
.item {
  grid-column: 2 / 4;
}

/* grid-row: start / end */
.item {
  grid-row: 1 / 3;
}

/* 合并简写：grid-area: row-start / col-start / row-end / col-end */
.item {
  grid-area: 1 / 2 / 3 / 4;
}

3. span 关键字

使用 span 指定跨越的轨道数量，而不是结束线：

css 复制代码 
/* 跨越2列 */
.item {
  grid-column: 2 / span 2;
  /* 等价于 grid-column: 2 / 4 */
}

/* 跨越3行 */
.item {
  grid-row: 1 / span 3;
}

/* 简写 */
.item {
  grid-area: 1 / 2 / span 2 / span 3;
}

4. 命名网格线

4.1 定义命名网格线

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 2fr [content-end] 1fr [main-end];
  grid-template-rows: [header-start] 100px [main-start] 200px [main-end] 100px [footer-end];
}

4.2 使用命名网格线

css 复制代码 
.header {
  grid-column: main-start / main-end;
  grid-row: header-start / main-start;
}

.main {
  grid-column: content-start / content-end;
  grid-row: main-start / main-end;
}

5. 命名网格区域

5.1 定义网格区域

使用 grid-template-areas 创建命名的区域：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 80px 200px 60px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

5.2 放置项目

html 复制代码 
<div class="grid">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main</main>
  <footer class="footer">Footer</footer>
</div>
css 复制代码 
.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

5.3 点号表示空单元格

css 复制代码 
.grid {
  grid-template-areas:
    "header header header"
    ". main main"
    "footer footer footer";
  /* . 表示该位置为空 */
}

6. 对齐方式

6.1 项目在单元格内对齐

属性 方向 说明
justify-self 水平 单个项目在单元格内的水平对齐
align-self 垂直 单个项目在单元格内的垂直对齐
place-self 两者 简写 align-self justify-self
css 复制代码 
.item {
  justify-self: start;   /* 左对齐 */
  justify-self: end;     /* 右对齐 */
  justify-self: center;  /* 居中 */
  justify-self: stretch; /* 拉伸（默认）*/
  
  align-self: start;     /* 顶部对齐 */
  align-self: end;       /* 底部对齐 */
  align-self: center;    /* 垂直居中 */
  align-self: stretch;   /* 拉伸（默认）*/
}

6.2 所有项目在网格内对齐

属性 方向 说明
justify-items 水平 所有项目在单元格内的水平对齐
align-items 垂直 所有项目在单元格内的垂直对齐
place-items 两者 简写
css 复制代码 
.grid {
  justify-items: center;  /* 所有项目水平居中 */
  align-items: center;    /* 所有项目垂直居中 */
  place-items: center;    /* 所有项目居中 */
}

6.3 整个网格的对齐

属性 方向 说明
justify-content 水平 网格整体在容器中的水平对齐
align-content 垂直 网格整体在容器中的垂直对齐
place-content 两者 简写
css 复制代码 
.grid {
  justify-content: start;    /* 左对齐 */
  justify-content: center;   /* 居中 */
  justify-content: end;      /* 右对齐 */
  justify-content: space-between;  /* 两端对齐 */
  justify-content: space-around;   /* 环绕对齐 */
  justify-content: space-evenly;   /* 均匀对齐 */
}

7. 自动放置

7.1 默认行为

Grid 项目按 HTML 顺序自动放置：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 项目自动按行填充 */
}

7.2 grid-auto-flow

控制自动放置的方向：

css 复制代码 
/* 按行填充（默认）*/
.grid {
  grid-auto-flow: row;
}

/* 按列填充 */
.grid {
  grid-auto-flow: column;
}

/* 行填充，但尽量填满空白 */
.grid {
  grid-auto-flow: row dense;
}

/* 列填充，但尽量填满空白 */
.grid {
  grid-auto-flow: column dense;
}

8. 隐式网格

8.1 定义隐式网格尺寸

当项目超出定义的网格时，会自动创建隐式网格：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;  /* 只定义了2行 */
  
  /* 额外行的默认高度 */
  grid-auto-rows: 80px;
  
  /* 额外列的默认宽度 */
  grid-auto-columns: 100px;
}

8.2 隐式网格与显式网格

复制代码 
显式网格（定义的行/列）    隐式网格（自动生成）
┌────┬────┬────┐           ┌────┬────┬────┐
│ 1  │ 2  │ 3  │           │ 7  │ 8  │ 9  │
├────┼────┼────┤           ├────┼────┼────┤
│ 4  │ 5  │ 6  │           │ 10 │ 11 │ 12 │
└────┴────┴────┘           └────┴────┴────┘

9. 完整示例

9.1 经典网页布局

html 复制代码 
<style>
  .grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 80px 1fr 60px;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
    gap: 10px;
    min-height: 100vh;
  }
  
  .header {
    grid-area: header;
    background: #3b82f6;
    padding: 20px;
  }
  
  .sidebar {
    grid-area: sidebar;
    background: #10b981;
    padding: 20px;
  }
  
  .main {
    grid-area: main;
    background: #f59e0b;
    padding: 20px;
  }
  
  .footer {
    grid-area: footer;
    background: #6b7280;
    padding: 20px;
  }
</style>

<div class="grid">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

9.2 卡片画廊

html 复制代码 
<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  
  .card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  /* 第一个卡片跨越2列 */
  .card:first-child {
    grid-column: span 2;
  }
  
  /* 第三个卡片跨越2行 */
  .card:nth-child(3) {
    grid-row: span 2;
  }
</style>

<div class="gallery">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
  <div class="card">卡片6</div>
</div>

10. 练习

练习 1：放置项目

将下面 HTML 中的项目放置到指定位置：

  • 项目 A：占据第 1-2 行，第 1-2 列
  • 项目 B：占据第 1-2 行，第 3-4 列
  • 项目 C：占据第 3 行，第 1-4 列
html 复制代码 
<div class="grid">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

参考答案：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.a {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.b {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.c {
  grid-column: 1 / 5;
  grid-row: 3 / 4;
}

练习 2：使用命名区域

创建布局：

  • 顶部：标题（header）
  • 左侧：导航（nav）
  • 右侧：内容（content）
  • 底部：页脚（footer）

参考答案：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "nav content"
    "footer footer";
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.content { grid-area: content; }
.footer { grid-area: footer; }

11. 总结

属性 作用 示例
grid-column-start/end 指定列开始/结束线 grid-column: 2 / 4
grid-row-start/end 指定行开始/结束线 grid-row: 1 / 3
grid-area 合并简写 grid-area: 1/2/3/4
span 跨越轨道数 grid-column: 2 / span 2
grid-template-areas 命名区域 "header header"
justify-self 项目水平对齐 center
align-self 项目垂直对齐 center
grid-auto-flow 自动放置方向 row dense
grid-auto-rows 隐式行高度 100px

Grid 布局：高级特性

1. 子网格 subgrid

subgrid 允许子网格继承父网格的轨道定义，创建更复杂的嵌套布局。

1.1 基础用法

css 复制代码 
/* 父网格 */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* 子网格继承父网格的列定义 */
.child {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}

1.2 完整示例

html 复制代码 
<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
  }
  
  .card {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
  }
  
  /* 卡片内部元素自动对齐父网格的列 */
  .card-header {
    grid-column: 1 / 2;
  }
  
  .card-content {
    grid-column: 2 / 3;
  }
</style>

<div class="grid">
  <div class="card">
    <div class="card-header">标题</div>
    <div class="card-content">内容与标题对齐</div>
  </div>
</div>

1.3 同时使用行和列 subgrid

css 复制代码 
.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  grid-column: span 2;
}

2. 网格命名区域高级用法

2.1 重复区域名称

多个单元格可以使用相同名称，创建合并区域：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 200px 100px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

2.2 空区域使用点号

css 复制代码 
.grid {
  grid-template-areas:
    "header header header"
    ". main main"
    "footer footer footer";
}

2.3 响应式区域

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

3. 层叠与 z-index

Grid 项目可以重叠，使用 z-index 控制层叠顺序。

3.1 重叠示例

html 复制代码 
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
  }
  
  .item1 {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
    background: rgba(59, 130, 246, 0.5);
    z-index: 1;
  }
  
  .item2 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: rgba(239, 68, 68, 0.5);
    z-index: 2;
  }
</style>

<div class="grid">
  <div class="item1">背景层</div>
  <div class="item2">前景层</div>
</div>

4. masonry 布局（实验性）

瀑布流布局，项目按列排列，高度自适应。

4.1 基本语法

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
}

4.2 浏览器支持

目前需要启用实验性标志：

  • Firefox: layout.css.grid-template-masonry-value.enabled

4.3 替代方案：使用 auto-fill

css 复制代码 
/* 使用 minmax 实现类似效果 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

5. 多列对齐详解

5.1 水平对齐 (justify-content)

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: 100px 100px;
  justify-content: start;     /* 左对齐 */
  justify-content: end;       /* 右对齐 */
  justify-content: center;    /* 居中 */
  justify-content: space-between;  /* 两端对齐 */
  justify-content: space-around;   /* 环绕对齐 */
  justify-content: space-evenly;   /* 均匀对齐 */
}

5.2 垂直对齐 (align-content)

css 复制代码 
.grid {
  display: grid;
  grid-template-rows: 100px 100px;
  align-content: start;     /* 顶部对齐 */
  align-content: end;       /* 底部对齐 */
  align-content: center;    /* 居中 */
  align-content: space-between;
  align-content: space-around;
  align-content: space-evenly;
}

5.3 完整对齐示例

html 复制代码 
<style>
  .grid {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    justify-content: center;
    align-content: center;
    height: 500px;
    background: #f0f0f0;
  }
</style>

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

6. 自动填充 vs 自动适配

6.1 auto-fill

尽可能多地创建轨道，即使为空：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

6.2 auto-fit

创建轨道但会折叠空轨道：

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

6.3 对比

复制代码 
auto-fill（保留空轨道）    auto-fit（折叠空轨道）
┌────┬────┬────┬────┐      ┌────┬────┬────┬────┐
│ 1  │ 2  │    │    │      │ 1  │ 2  │    │    │
└────┴────┴────┴────┘      └────┴────┴────┴────┘
    空轨道保留               空轨道折叠，内容拉伸

7. 网格动画

Grid 布局支持平滑过渡动画。

7.1 网格重排动画

html 复制代码 
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    transition: all 0.3s ease;
  }
  
  .grid.expanded {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .item {
    background: #3b82f6;
    padding: 20px;
    transition: all 0.3s ease;
  }
</style>

<button onclick="toggle()">切换</button>
<div class="grid" id="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<script>
function toggle() {
  document.getElementById('grid').classList.toggle('expanded');
}
</script>

7.2 项目位置动画

css 复制代码 
.item {
  transition: all 0.3s ease;
}

.item.moved {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

8. 性能优化

8.1 避免过度使用 grid-template-areas

复杂的区域定义会影响渲染性能，简单布局使用网格线更高效。

8.2 使用 contain 属性

css 复制代码 
.grid {
  contain: layout;
}

8.3 减少重排

批量修改网格属性，而不是逐个修改：

javascript 复制代码 
// ✅ 推荐
grid.style.gridTemplateColumns = 'repeat(4, 1fr)';

// ❌ 避免
for (let i = 0; i < 4; i++) {
  grid.style.gridTemplateColumns += ' 1fr';
}

9. 响应式网格高级技巧

9.1 容器查询 + Grid

css 复制代码 
.card-container {
  container-type: inline-size;
}

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@container (min-width: 400px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

9.2 视口单位 + Grid

css 复制代码 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1rem;
}

10. 综合实战

10.1 现代博客布局

html 复制代码 
<style>
  .blog {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header header"
      "nav main aside"
      "footer footer footer";
    min-height: 100vh;
    gap: 20px;
  }
  
  .header {
    grid-area: header;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
  }
  
  .nav {
    grid-area: nav;
    background: #f3f4f6;
    padding: 1rem;
    border-radius: 8px;
  }
  
  .main {
    grid-area: main;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .aside {
    grid-area: aside;
    background: #f3f4f6;
    padding: 1rem;
    border-radius: 8px;
  }
  
  .footer {
    grid-area: footer;
    background: #1f2937;
    color: white;
    padding: 1rem;
    text-align: center;
  }
  
  @media (max-width: 768px) {
    .blog {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "nav"
        "main"
        "aside"
        "footer";
    }
  }
</style>

<div class="blog">
  <header class="header">博客标题</header>
  <nav class="nav">导航菜单</nav>
  <main class="main">主要内容区域</main>
  <aside class="aside">侧边栏</aside>
  <footer class="footer">页脚信息</footer>
</div>

10.2 仪表盘布局

html 复制代码 
<style>
  .dashboard {
    display: grid;
    grid-template-columns: 260px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "sidebar header header"
      "sidebar main main"
      "sidebar footer footer";
    min-height: 100vh;
  }
  
  .sidebar {
    grid-area: sidebar;
    background: #1e293b;
    color: white;
    padding: 1rem;
  }
  
  .header {
    grid-area: header;
    background: white;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
  }
  
  .main {
    grid-area: main;
    padding: 1rem;
    background: #f8fafc;
  }
  
  .footer {
    grid-area: footer;
    background: white;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
  }
  
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .stat-card {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
</style>

<div class="dashboard">
  <aside class="sidebar">侧边栏菜单</aside>
  <header class="header">顶部栏</header>
  <main class="main">
    <div class="stats">
      <div class="stat-card">统计卡片1</div>
      <div class="stat-card">统计卡片2</div>
      <div class="stat-card">统计卡片3</div>
    </div>
  </main>
  <footer class="footer">页脚</footer>
</div>

11. 练习

练习 1：响应式照片墙

创建照片墙布局：

  • 手机：1列
  • 平板：2列
  • 电脑：3列
  • 第一张照片占据 2 列

参考答案：

css 复制代码 
.gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.gallery > :first-child {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery > :first-child {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery > :first-child {
    grid-column: span 2;
  }
}

练习 2：卡片重叠效果

创建 3 张卡片，它们重叠部分区域，形成层叠效果。

参考答案：

css 复制代码 
.stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.stack > * {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  transition: transform 0.3s;
}

.stack > :first-child {
  z-index: 3;
  transform: translate(0, 0);
}

.stack > :nth-child(2) {
  z-index: 2;
  transform: translate(10px, 10px);
}

.stack > :nth-child(3) {
  z-index: 1;
  transform: translate(20px, 20px);
}

.stack > *:hover {
  transform: translate(0, 0);
  z-index: 10;
}

12. 总结

特性 说明 示例
subgrid 子网格继承父网格 grid-template-columns: subgrid
命名区域 定义布局区域 grid-template-areas
重叠 网格项目重叠 使用相同 grid-area
masonry 瀑布流布局 grid-template-rows: masonry
auto-fill 自动填充轨道 repeat(auto-fill, ...)
auto-fit 自动适配轨道 repeat(auto-fit, ...)
容器查询 根据容器大小响应 @container

13. 资源推荐

相关推荐
cc_heart2 小时前
antdv-next/x：面向 Vue 的 AI 组件体系
前端·javascript·vue.js
竹林8182 小时前
RainbowKit快速集成多链钱包连接：从“一键连接”到“多链切换”的实战踩坑
前端·javascript
用户81274828151202 小时前
android使用uinput节点任意注入鼠标事件-重学安卓input子系统
前端
用户69371750013842 小时前
AI来了，同事们的效率为什么差这么多？
android·前端·ai编程
凡小烦2 小时前
从定制化页签tab到compose列表使用
android·前端
软弹2 小时前
快速了解前端中的跨域问题
前端·javascript·vue.js·react.js·node.js·跨域
RePeaT2 小时前
React 常用知识点整理
前端·react.js·面试
533_2 小时前
[vxe-table] 合并单元格
前端
浩星2 小时前
electron系列9：调用原生能力，剪贴板、通知、开机自启
前端·javascript·electron
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03GitHub 镜像站点04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05GPT-6核心能力解析及与现有主流大模型对比06免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手07从限购到畅通：GLM-5.1 Coding Plan接入攻略08AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析09LLM Wiki：让大模型替你打理知识库的完整指南10Oh My Codex 快速使用指南