网格布局

Kpsmart2025年3月2日大约 15 分钟

网格布局

CSS网格(Grid)是一个二维布局系统，允许开发者创建复杂的网格布局。本章将详细介绍Grid布局的使用方法。

Grid布局简介

CSS Grid Layout（网格布局）是CSS中最强大的布局系统。它是一个二维系统，可以同时处理行和列，这使得创建复杂布局变得更加简单。

为什么使用Grid？

虽然Flexbox在一维布局（行或列）方面表现出色，但当涉及到同时控制行和列的二维布局时，Grid布局提供了更强大的功能：

精确控制元素在二维空间中的位置
轻松创建复杂的网格系统
简化响应式设计
减少嵌套和媒体查询的需求
更直观地表达设计意图

Grid的基本概念

Grid布局基于以下核心概念：

Grid容器（Grid Container）：设置了display: grid或display: inline-grid的元素
Grid项目（Grid Items）：Grid容器的直接子元素
Grid线（Grid Lines）：构成网格结构的分隔线，包括水平线和垂直线
Grid轨道（Grid Tracks）：两条相邻网格线之间的空间，即行或列
Grid单元格（Grid Cell）：四条网格线围成的区域，是最小的网格单位
Grid区域（Grid Area）：由任意数量的网格单元格组成的矩形区域

创建Grid容器

要创建Grid容器，只需要设置display属性为grid或inline-grid：

.container {
  display: grid;           /* 块级Grid容器 */
}

.inline-container {
  display: inline-grid;    /* 内联Grid容器 */
}

区别：

grid：容器本身表现为块级元素（占据整行）
inline-grid：容器本身表现为内联元素（只占据内容所需空间）

定义网格结构

grid-template-columns 和 grid-template-rows

这两个属性定义了网格的列和行的大小：

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

使用fr单位

fr是一个特殊单位，表示网格容器中可用空间的一部分（fraction）：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，中间列占用两倍空间 */
  grid-template-rows: 1fr 3fr;        /* 两行，第二行占用三倍空间 */
}

repeat()函数

repeat()函数可以简化重复值的写法：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);    /* 三列等宽 */
  grid-template-rows: repeat(2, 100px);     /* 两行，每行高100px */
}

repeat()也可以定义重复的模式：

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px 200px); /* 相当于：100px 200px 100px 200px */
}

minmax()函数

minmax()函数定义了一个大小范围，不小于最小值，不大于最大值：

.container {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 2fr; /* 第一列最小100px，最大1fr */
}

auto-fill 和 auto-fit

这两个关键字与repeat()函数一起使用，可以创建弹性的网格布局：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* 尽可能多地放置列，每列最小200px，最大1fr */
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 类似auto-fill，但会拉伸项目以填充整行 */
}

grid-template-areas

grid-template-areas属性通过命名网格区域来定义网格布局：

.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header header"
    "sidebar content aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

使用点号（.）表示空单元格：

.container {
  grid-template-areas: 
    "header header header"
    "sidebar content ."
    "footer footer footer";
}

grid-template

grid-template是grid-template-rows、grid-template-columns和grid-template-areas的简写属性：

.container {
  grid-template: 
    "header header header" auto
    "sidebar content aside" 1fr
    "footer footer footer" auto
    / 1fr 3fr 1fr;
}

上面的代码等同于：

.container {
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-areas: 
    "header header header"
    "sidebar content aside"
    "footer footer footer";
}

网格间距

grid-column-gap和grid-row-gap属性（或简写形式grid-gap）定义了网格线的大小：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;    /* 列间距 */
  grid-row-gap: 10px;       /* 行间距 */
}

简写形式：

.container {
  grid-gap: 10px 20px;      /* 行间距 列间距 */
  /* 或者 */
  grid-gap: 15px;           /* 行列间距相同 */
}

注意：现在推荐使用column-gap、row-gap和gap，它们是标准化的属性名。

放置Grid项目

grid-column 和 grid-row

这两个属性定义了Grid项目的位置和跨度：

.item {
  grid-column: 1 / 3;       /* 从第1条列线到第3条列线（跨2列） */
  grid-row: 2 / 4;          /* 从第2条行线到第4条行线（跨2行） */
}

也可以使用span关键字：

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

简写形式：

.item {
  grid-column: 1 / -1;      /* 从第1条列线到最后一条列线（占满整行） */
}

grid-area

grid-area属性可以用四个值指定网格项目的位置：

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

或者引用由grid-template-areas定义的命名区域：

.item {
  grid-area: header;        /* 放置在名为"header"的区域 */
}

对齐Grid项目

justify-items 和 align-items

这两个属性控制Grid项目在其网格区域内的对齐方式：

.container {
  justify-items: start;     /* 水平方向上靠左对齐 */
  align-items: center;      /* 垂直方向上居中对齐 */
}

可能的值：

start：靠近起始边缘对齐
end：靠近结束边缘对齐
center：居中对齐
stretch：拉伸填满（默认值）

justify-content 和 align-content

这两个属性控制整个网格在容器内的对齐方式：

.container {
  justify-content: space-between; /* 水平方向上分散对齐 */
  align-content: center;          /* 垂直方向上居中对齐 */
}

可能的值：

start：靠近起始边缘对齐
end：靠近结束边缘对齐
center：居中对齐
stretch：拉伸填满（默认值）
space-around：均匀分布，两端有一半的间距
space-between：均匀分布，两端对齐
space-evenly：均匀分布，包括两端

justify-self 和 align-self

这两个属性允许单个Grid项目有与其他项目不同的对齐方式：

.item {
  justify-self: end;        /* 水平方向上靠右对齐 */
  align-self: start;        /* 垂直方向上靠上对齐 */
}

隐式网格

当Grid项目放置在显式定义的网格之外时，会创建隐式网格轨道。

grid-auto-rows 和 grid-auto-columns

这两个属性定义了隐式创建的行和列的大小：

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

grid-auto-flow

grid-auto-flow属性控制自动放置算法的工作方式：

.container {
  grid-auto-flow: row;      /* 默认值，优先填充行 */
  grid-auto-flow: column;   /* 优先填充列 */
  grid-auto-flow: dense;    /* 尝试填充网格中的空洞 */
  grid-auto-flow: row dense; /* 优先填充行，并尝试填充空洞 */
}

Grid布局实例

基本网格布局

创建一个简单的3x3网格：

<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 class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

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

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

经典网页布局

使用Grid创建经典的网页布局：

<div class="page-layout">
  <header>页眉</header>
  <nav>导航</nav>
  <main>主内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div>

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 10px;
}

header { grid-area: header; background-color: #f0f0f0; padding: 20px; }
nav { grid-area: nav; background-color: #e0e0e0; padding: 20px; }
main { grid-area: main; background-color: #f8f8f8; padding: 20px; }
aside { grid-area: aside; background-color: #e0e0e0; padding: 20px; }
footer { grid-area: footer; background-color: #f0f0f0; padding: 20px; }

/* 响应式设计 */
@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

照片画廊

创建一个响应式照片画廊：

<div class="gallery">
  <img src="img1.jpg" alt="图片1" class="gallery-item">
  <img src="img2.jpg" alt="图片2" class="gallery-item tall">
  <img src="img3.jpg" alt="图片3" class="gallery-item">
  <img src="img4.jpg" alt="图片4" class="gallery-item wide">
  <img src="img5.jpg" alt="图片5" class="gallery-item">
  <img src="img6.jpg" alt="图片6" class="gallery-item">
  <img src="img7.jpg" alt="图片7" class="gallery-item tall wide">
  <img src="img8.jpg" alt="图片8" class="gallery-item">
  <img src="img9.jpg" alt="图片9" class="gallery-item">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 10px;
}

.gallery-item {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 特殊尺寸的图片 */
.tall {
  grid-row: span 2; /* 跨越两行 */
}

.wide {
  grid-column: span 2; /* 跨越两列 */
}

@media (max-width: 768px) {
  .wide, .tall {
    grid-column: auto;
    grid-row: auto;
  }
}

仪表板布局

创建一个响应式仪表板布局：

<div class="dashboard">
  <div class="dashboard-item header">
    <h1>仪表板</h1>
  </div>
  <div class="dashboard-item sidebar">
    <h2>导航</h2>
    <ul>
      <li>首页</li>
      <li>统计</li>
      <li>设置</li>
    </ul>
  </div>
  <div class="dashboard-item main">
    <h2>主要内容</h2>
    <p>这里是仪表板的主要内容区域。</p>
  </div>
  <div class="dashboard-item chart-1">
    <h3>图表1</h3>
    <div class="chart-placeholder"></div>
  </div>
  <div class="dashboard-item chart-2">
    <h3>图表2</h3>
    <div class="chart-placeholder"></div>
  </div>
  <div class="dashboard-item stats">
    <h3>统计数据</h3>
    <ul>
      <li>用户：1,234</li>
      <li>访问：5,678</li>
      <li>转化率：12.3%</li>
    </ul>
  </div>
</div>

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "header header header header"
    "sidebar main main main"
    "sidebar chart-1 chart-2 stats";
  gap: 15px;
  height: 100vh;
  padding: 15px;
}

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

.header {
  grid-area: header;
  background-color: #4a90e2;
  color: white;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
}

.chart-1 {
  grid-area: chart-1;
}

.chart-2 {
  grid-area: chart-2;
}

.stats {
  grid-area: stats;
}

.chart-placeholder {
  width: 100%;
  height: 150px;
  background-color: #e0e0e0;
  border-radius: 4px;
}

@media (max-width: 992px) {
  .dashboard {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "sidebar sidebar"
      "main main"
      "chart-1 chart-2"
      "stats stats";
    height: auto;
  }
}

@media (max-width: 576px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "chart-1"
      "chart-2"
      "stats";
  }
}

Grid与Flexbox的结合使用

Grid和Flexbox可以结合使用，发挥各自的优势：

<div class="grid-flex-layout">
  <header>
    <div class="logo">Logo</div>
    <nav>
      <a href="#">首页</a>
      <a href="#">关于</a>
      <a href="#">服务</a>
      <a href="#">联系</a>
    </nav>
  </header>
  <main>
    <div class="card">卡片1</div>
    <div class="card">卡片2</div>
    <div class="card">卡片3</div>
  </main>
  <footer>
    <div>&copy; 2023 Grid与Flex示例</div>
    <div>
      <a href="#">隐私政策</a>
      <a href="#">条款</a>
    </div>
  </footer>
</div>

.grid-flex-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* 使用Flexbox处理水平排列的元素 */
header, footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f0f0f0;
}

nav, footer div:last-child {
  display: flex;
  gap: 1rem;
}

/* 使用Grid处理卡片布局 */
main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Grid布局最佳实践

1. 使用命名网格线

命名网格线可以使代码更具可读性：

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end main-start] 1fr [main-end footer-start] auto [footer-end];
}

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

2. 使用grid-template-areas进行布局

grid-template-areas提供了一种直观的方式来定义布局：

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

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

3. 使用auto-fill和auto-fit创建响应式布局

这两个关键字可以创建自适应的网格布局，无需媒体查询：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

4. 使用minmax()函数设置大小限制

minmax()函数可以确保元素在不同屏幕尺寸下保持合理的大小：

.container {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr minmax(150px, 200px);
}

5. 使用grid-auto-flow: dense填充空白

dense关键字可以帮助填充网格中的空白区域：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: dense;
}

6. 结合使用Grid和Flexbox

Grid适合整体页面布局，Flexbox适合组件内部布局：

.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.navigation {
  display: flex;
  flex-direction: column;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
}

Grid与其他布局方法的比较

Grid vs Flexbox

特性	Grid	Flexbox
维度	二维（行和列）	一维（行或列）
用途	整页布局、复杂网格系统	组件布局、小规模布局
项目对齐	在两个轴上精确	在一个轴上灵活
间隙控制	使用gap	使用gap或margin
自动放置	强大	有限
显式定位	强大（使用grid-area）	有限（使用order）

Grid vs 传统布局

特性	Grid	传统布局（浮动、定位）
复杂布局	简单	复杂
代码量	少	多
响应式	内置支持	需要额外代码
二维控制	强大	有限
浏览器支持	现代浏览器	所有浏览器

浏览器兼容性

Grid布局在所有现代浏览器中都得到了良好支持。对于旧版浏览器（如IE11），可能需要使用前缀或替代方案。

@supports (display: grid) {
  /* 使用Grid布局的代码 */
}

@supports not (display: grid) {
  /* 替代方案 */
}

实例：完整的Grid页面布局

下面是一个使用Grid创建的完整页面布局示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid页面布局</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      color: #333;
    }
    
    .grid-page {
      display: grid;
      grid-template-areas:
        "header header header"
        "nav content sidebar"
        "footer footer footer";
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
    }
    
    header {
      grid-area: header;
      background-color: #4a90e2;
      color: white;
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-size: 1.5rem;
      font-weight: bold;
    }
    
    .main-nav ul {
      display: flex;
      list-style: none;
    }
    
    .main-nav li {
      margin-left: 1.5rem;
    }
    
    .main-nav a {
      color: white;
      text-decoration: none;
    }
    
    nav.sidebar {
      grid-area: nav;
      background-color: #f5f5f5;
      padding: 1rem;
    }
    
    .sidebar-nav {
      list-style: none;
    }
    
    .sidebar-nav li {
      margin-bottom: 0.5rem;
    }
    
    .sidebar-nav a {
      color: #333;
      text-decoration: none;
    }
    
    main {
      grid-area: content;
      padding: 1rem;
    }
    
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1rem;
      margin-top: 1rem;
    }
    
    .feature-item {
      background-color: #f9f9f9;
      padding: 1.5rem;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    aside {
      grid-area: sidebar;
      background-color: #f5f5f5;
      padding: 1rem;
    }
    
    footer {
      grid-area: footer;
      background-color: #333;
      color: white;
      padding: 1rem;
      text-align: center;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .grid-page {
        grid-template-areas:
          "header"
          "nav"
          "content"
          "sidebar"
          "footer";
        grid-template-columns: 1fr;
      }
      
      .main-nav {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="grid-page">
    <header>
      <div class="logo">Grid示例</div>
      <nav class="main-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>
    
    <nav class="sidebar">
      <h2>导航</h2>
      <ul class="sidebar-nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">产品</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
    
    <main>
      <h1>Grid布局示例</h1>
      <p>这是一个使用CSS Grid创建的响应式页面布局示例。它包含了页眉、页脚、侧边栏、主内容区域和右侧栏。</p>
      
      <div class="feature-grid">
        <div class="feature-item">
          <h3>特性1</h3>
          <p>Grid布局使得创建复杂的二维布局变得简单。</p>
        </div>
        <div class="feature-item">
          <h3>特性2</h3>
          <p>使用grid-template-areas可以直观地定义布局结构。</p>
        </div>
        <div class="feature-item">
          <h3>特性3</h3>
          <p>响应式设计可以通过简单的媒体查询实现。</p>
        </div>
      </div>
    </main>
    
    <aside>
      <h2>侧边栏</h2>
      <p>这是右侧边栏的内容。</p>
      <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
      </ul>
    </aside>
    
    <footer>
      <p>&copy; 2023 Grid布局示例</p>
    </footer>
  </div>
</body>
</html>

总结

CSS Grid布局是一个强大的二维布局系统，它彻底改变了我们创建网页布局的方式。通过本章的学习，我们了解了：

Grid的基本概念：Grid容器、Grid项目、Grid线、Grid轨道、Grid单元格和Grid区域
定义网格结构：使用grid-template-columns、grid-template-rows和grid-template-areas
放置Grid项目：使用grid-column、grid-row和grid-area
对齐Grid项目：使用justify-items、align-items、justify-content、align-content、justify-self和align-self
处理隐式网格：使用grid-auto-rows、grid-auto-columns和grid-auto-flow
实际应用场景：基本网格布局、经典网页布局、照片画廊和仪表板布局
最佳实践：命名网格线、使用grid-template-areas、创建响应式布局等

Grid布局的优势在于它的灵活性和强大的二维控制能力，使得创建复杂的响应式布局变得更加简单。虽然它相对较新，但已经在现代浏览器中得到了广泛支持。

Grid和Flexbox并不是互相排斥的，而是互相补充的。Grid适合整体页面布局，而Flexbox适合组件内部的一维布局。通过结合使用这两种技术，可以创建出几乎任何你能想到的布局。

练习

创建一个使用Grid的杂志风格布局，包含不同大小的文章块。
实现一个使用Grid的响应式照片墙，在不同屏幕尺寸下自动调整布局。
使用Grid创建一个仪表板界面，包含多个不同大小的卡片。
实现一个使用Grid的日历布局。
创建一个使用Grid和Flexbox结合的完整网站布局。

进一步学习

MDN Grid布局指南
CSS-Tricks Grid完全指南
Grid Garden - 一个学习Grid的游戏
Grid by Example - 各种Grid布局示例
Jen Simmons的实验室 - 创新的Grid布局示例
Rachel Andrew的Grid资源

通过掌握CSS Grid布局，你将能够创建出更加复杂、灵活和响应式的网页布局，为用户提供更好的浏览体验。在下一章中，我们将学习CSS变换、过渡和动画，为网页添加动态效果。