第1章：Grid布局入门认知

在本节中，我们将介绍Grid布局的基本概念、应用场景以及与Flex布局的区别，帮助你快速入门Grid布局。

1.1 什么是Grid布局？

Grid布局（网格布局）是CSS3引入的一种二维网格布局系统，它允许你在两个维度（行和列）上排列元素。

核心概念

二维布局：同时控制行和列的布局
网格系统：通过网格线划分出的单元格来定位元素
灵活调整：可以轻松实现复杂的响应式布局

一句话理解

Grid布局就是将容器划分为行和列的网格，然后将项目放置在这些网格中。

1.2 为什么要学Grid布局？

解决Flex布局的痛点

Flex布局：一维布局，只能在一个方向上排列元素
Grid布局：二维布局，可以同时控制行和列的排列

优势

更灵活的布局：可以轻松实现复杂的二维布局
更简洁的代码：减少嵌套和复杂的CSS
更好的响应式支持：通过媒体查询和自动布局实现响应式设计
更直观的布局方式：通过网格线和区域命名，使布局更加直观

1.3 Grid布局的应用场景

1. 网页整体布局

头部、主体、侧边栏、底部的布局
复杂的多列布局

2. 复杂卡片排版

不规则的卡片网格
自适应的卡片布局

3. 响应式网格

根据屏幕尺寸自动调整列数
移动端和PC端的不同布局

4. 其他场景

仪表盘布局
相册布局
表单布局

1.4 Grid布局与Flex布局的核心区别

特性	Grid布局	Flex布局
维度	二维布局（行和列）	一维布局（行或列）
适用场景	复杂的二维布局	简单的线性布局
布局方式	基于网格线和区域	基于主轴和交叉轴
灵活性	更适合复杂布局	更适合简单布局
学习曲线	稍陡	较平缓

选型参考

使用Grid布局：需要同时控制行和列的布局，如网页整体布局、复杂卡片网格等
使用Flex布局：只需要在一个方向上排列元素，如导航栏、列表等
结合使用：Grid控制整体布局，Flex控制局部元素排版

1.5 学习前提：HTML/CSS基础回顾

1. HTML基础

理解HTML元素和结构
掌握基本的HTML标签

2. CSS基础

理解CSS选择器
掌握基本的CSS样式（颜色、字体、边距等）
了解盒模型

3. Flex布局基础

理解Flex容器和项目
掌握基本的Flex属性（如flex-direction、justify-content、align-items）

1.6 学习路线规划

基础认知：了解Grid布局的基本概念和术语
核心概念：掌握Grid布局的核心术语和开启方式
容器属性：学习Grid容器的核心属性
项目属性：学习Grid项目的核心属性
实战案例：通过实战案例巩固所学知识
避坑指南：了解常见问题和解决方案
进阶提升：学习Grid布局的进阶技巧
面试准备：掌握Grid布局的高频面试题

1.7 第一个Grid布局案例

让我们通过一个简单的例子来快速体验Grid布局的效果。

代码示例

html

<!DOCTYPE html>
<html>
<head>
  <title>第一个Grid布局案例</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 100px 100px;
      gap: 10px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>第一个Grid布局案例</h1>
  <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行的网格
每个单元格的高度为100px
单元格之间的间距为10px
项目在单元格中居中对齐

实操练习

创建一个简单的Grid布局，包含2列3行
尝试修改网格的列宽和行高
调整单元格之间的间距
观察Grid布局与Flex布局的区别

第1章：Grid布局入门认知 ​

1.1 什么是Grid布局？ ​

核心概念 ​

一句话理解 ​

1.2 为什么要学Grid布局？ ​

解决Flex布局的痛点 ​

优势 ​

1.3 Grid布局的应用场景 ​

1. 网页整体布局 ​

2. 复杂卡片排版 ​

3. 响应式网格 ​

4. 其他场景 ​

1.4 Grid布局与Flex布局的核心区别 ​

选型参考 ​

1.5 学习前提：HTML/CSS基础回顾 ​

1. HTML基础 ​

2. CSS基础 ​

3. Flex布局基础 ​

1.6 学习路线规划 ​

1.7 第一个Grid布局案例 ​

代码示例 ​

效果说明 ​

实操练习 ​

第1章：Grid布局入门认知

1.1 什么是Grid布局？

核心概念

一句话理解

1.2 为什么要学Grid布局？

解决Flex布局的痛点

优势

1.3 Grid布局的应用场景

1. 网页整体布局

2. 复杂卡片排版

3. 响应式网格

4. 其他场景

1.4 Grid布局与Flex布局的核心区别

选型参考

1.5 学习前提：HTML/CSS基础回顾

1. HTML基础

2. CSS基础

3. Flex布局基础

1.6 学习路线规划

1.7 第一个Grid布局案例

代码示例

效果说明

实操练习