CSS3 布局 - grid 布局 - display: grid

核心知识点

  • Grid布局的基本概念和术语
  • display: grid 属性的语法和基本用法
  • Grid容器和Grid项目的关系
  • Grid布局与其他布局方式的对比
  • Grid布局的优势和适用场景

学习目标

  • 理解Grid布局的基本概念和术语
  • 掌握 display: grid 属性的使用方法
  • 能够创建简单的Grid布局
  • 了解Grid布局的优势和适用场景

语法解析

display: grid 属性用于将元素设置为Grid容器，使其内部的子元素成为Grid项目。

display: grid;

Grid布局基本术语

  • Grid容器：设置了 display: grid 的元素
  • Grid项目：Grid容器的直接子元素
  • Grid线：网格的分隔线，包括水平线和垂直线
  • Grid轨道：两条相邻Grid线之间的空间，包括行和列
  • Grid单元格：由相邻的水平线和垂直线围成的最小单位
  • Grid区域：由多个Grid单元格组成的矩形区域

代码示例

示例1：基本Grid布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: grid 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 50px 50px;
            gap: 10px;
            width: 350px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #4CAF50;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <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>

效果分析：创建了一个3列2行的Grid布局，每个Grid项目占据一个单元格。

示例2：使用fr单位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid布局使用fr单位示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px 100px;
            gap: 10px;
            width: 100%;
            max-width: 600px;
            border: 2px solid #333;
            padding: 10px;
        }
        .item {
            background-color: #2196F3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <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>

效果分析：使用 fr 单位创建自适应宽度的Grid布局，中间列的宽度是两侧列的2倍。

示例3：Grid布局与Flex布局对比

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid布局与Flex布局对比示例</title>
    <style>
        .container {
            width: 100%;
            max-width: 600px;
            border: 2px solid #333;
            padding: 10px;
            margin-bottom: 20px;
        }
        .flex-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .item {
            width: calc(33.333% - 6.666px);
            height: 80px;
            background-color: #FF9800;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .grid-container .item {
            width: auto;
        }
        h3 {
            margin-top: 0;
        }
    </style>
</head>
<body>
    <h3>Flex布局</h3>
    <div class="container flex-container">
        <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>
    
    <h3>Grid布局</h3>
    <div class="container grid-container">
        <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>

效果分析：对比了Flex布局和Grid布局的实现方式，Grid布局代码更简洁，不需要计算宽度。

布局示意图

基本Grid布局结构

+-------------------------+
| [项目1] [项目2] [项目3] |
| [项目4] [项目5] [项目6] |
+-------------------------+

Grid布局术语示意图

   列1      列2      列3
+---------+---------+--------+
|         |         |        | ← 行1
| 项目1   | 项目2   | 项目3  |
|         |         |        |
+---------+---------+--------+
|         |         |        | ← 行2
| 项目4   | 项目5   | 项目6  |
|         |         |        |
+---------+---------+--------+

实际应用场景

  1. 二维布局：当需要同时控制行和列的布局时，使用Grid布局
  2. 复杂网格：当需要创建具有不规则单元格大小的网格时，使用Grid布局
  3. 响应式布局：当需要在不同屏幕尺寸下重新排列网格项目时，使用Grid布局
  4. 卡片布局：当需要创建整齐的卡片网格时，使用Grid布局
  5. 页面布局：当需要创建整体页面结构（如头部、侧边栏、主内容、底部）时，使用Grid布局

Grid布局的优势

  1. 二维控制：同时控制行和列，比Flex布局（一维）更强大
  2. 简洁代码：使用 grid-template-columns 和 grid-template-rows 轻松定义网格结构
  3. 灵活定位：可以使用网格线或网格区域定位项目
  4. 响应式设计：结合 media queries 和 fr 单位创建响应式布局
  5. 自动布局：Grid布局会自动处理项目的排列和对齐

与其他布局方式的对比

布局方式 维度 优势 适用场景
Grid布局 二维 同时控制行和列，代码简洁 复杂网格布局、页面整体布局
Flex布局 一维 灵活的一维布局，适合列表和导航 导航栏、卡片列表、简单的一维布局
浮动布局 一维 兼容性好 旧浏览器兼容、简单的图文混排
定位布局 任意 精确控制元素位置 特殊定位需求、覆盖层

代码优化建议

  1. 性能考虑：Grid布局在现代浏览器中性能良好，但在复杂布局中应合理使用
  2. 浏览器兼容性：所有现代浏览器都支持Grid布局，但在旧版IE中不支持
  3. 代码简洁性：使用 repeat() 函数和 fr 单位简化代码
  4. 响应式设计：结合媒体查询，在不同屏幕尺寸下调整网格结构

实践练习

练习1：基础应用

创建一个3列3行的Grid布局，每个Grid项目显示一个数字（1-9）。

练习2：响应式布局

设计一个响应式Grid布局，在大屏幕上显示3列，在中等屏幕上显示2列，在小屏幕上显示1列。

练习3：页面布局

使用Grid布局创建一个简单的页面结构，包含：

  • 头部（占满第一行）
  • 侧边栏（占满第一列的剩余部分）
  • 主内容区域（占满剩余空间）
  • 底部（占满最后一行）

总结

display: grid 属性是CSS3中创建Grid布局的基础，通过设置该属性，你可以：

  • 将元素转换为Grid容器
  • 创建二维网格布局，同时控制行和列
  • 使用简洁的代码定义复杂的网格结构
  • 实现灵活的响应式布局

Grid布局是一种强大的二维布局方式，特别适合创建复杂的网格结构和整体页面布局，与Flex布局一起构成了现代CSS布局的核心技术。

« 上一篇 CSS3 布局 - order 属性 下一篇 » CSS3 布局 - grid-template-columns 属性
↑