网格布局（Grid布局，复杂布局首选）

14.1 Grid布局的定义

什么是Grid布局？

Grid（网格）布局是一种二维布局模型，可以同时控制行和列，比Flexbox更灵活，适合复杂布局。

Grid布局的核心概念

Grid容器：使用 display: grid 的元素
Grid项目：Grid容器的直接子元素
网格线：划分网格的线
网格轨道：两条相邻网格线之间的空间（行或列）
网格单元：行和列交叉形成的单元格
网格区域：一个或多个网格单元组成的矩形区域

14.2 开启Grid布局

语法

css

容器 {
  display: grid;
}

示例

css

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

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

14.3 核心属性

grid-template-columns（设置列）

定义：设置网格的列数和列宽。

语法：

css

容器 {
  grid-template-columns: 列宽1 列宽2 列宽3;
}

常用值：

px：固定像素值
%：百分比
fr：分数单位，占据可用空间的比例
repeat()：重复模式

示例：

css

/* 三列等宽 */
.three-columns {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 使用repeat */
.three-columns-repeat {
  grid-template-columns: repeat(3, 1fr);
}

/* 混合使用 */
.mixed-columns {
  grid-template-columns: 200px 1fr 2fr;
}

grid-template-rows（设置行）

定义：设置网格的行数和行高。

语法：

css

容器 {
  grid-template-rows: 行高1 行高2 行高3;
}

示例：

css

.two-rows {
  grid-template-rows: 100px 200px;
}

grid-gap（设置间距）

定义：设置网格项目之间的间距。

语法：

css

容器 {
  gap: 行间距 列间距;
}

示例：

css

/* 统一间距 */
.uniform-gap {
  gap: 20px;
}

/* 分别设置 */
.different-gap {
  gap: 20px 30px;
}

grid-area（控制项目占据区域）

定义：控制Grid项目占据的行和列。

语法：

css

项目 {
  grid-area: 行起始 / 列起始 / 行结束 / 列结束;
}

示例：

css

.header {
  grid-area: 1 / 1 / 2 / 4; /* 占据第1行，第1-3列 */
}

.sidebar {
  grid-area: 2 / 1 / 4 / 2; /* 占据第2-3行，第1列 */
}

.main {
  grid-area: 2 / 2 / 4 / 4; /* 占据第2-3行，第2-3列 */
}

14.4 实战：用Grid布局制作页面首页布局、相册网格

实战目标

使用Grid布局创建页面首页布局和相册网格。

实战步骤

创建HTML文件：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid布局实战</title>
  <style>
    /* 在这里添加CSS样式 */
  </style>
</head>
<body>
  <!-- 页面首页布局 -->
  <div class="page-layout">
    <header class="header">Header</header>
    <nav class="sidebar">Sidebar</nav>
    <main class="main-content">
      <h2>主要内容区域</h2>
      <p>这是使用Grid布局创建的页面布局示例。</p>
    </main>
    <footer class="footer">Footer</footer>
  </div>
  
  <!-- 相册网格 -->
  <div class="gallery-container">
    <h2>相册网格</h2>
    <div class="gallery-grid">
      <div class="gallery-item large">大图1</div>
      <div class="gallery-item">图2</div>
      <div class="gallery-item">图3</div>
      <div class="gallery-item">图4</div>
      <div class="gallery-item">图5</div>
      <div class="gallery-item wide">宽图6</div>
    </div>
  </div>
</body>
</html>

添加CSS样式：

css

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f5f5f5;
  padding: 20px;
}

/* 页面首页布局 */
.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 50px;
  min-height: 500px;
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 8px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #e3f2fd;
  padding: 20px;
  border-radius: 8px;
}

.main-content {
  grid-area: main;
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.main-content h2 {
  color: #333;
  margin-bottom: 15px;
}

.footer {
  grid-area: footer;
  background-color: #555;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* 相册容器 */
.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-container h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

/* 相册网格 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 150px);
  gap: 15px;
}

.gallery-item {
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
}

.gallery-item.large {
  grid-area: 1 / 1 / 3 / 3; /* 占据2x2区域 */
  background-color: #e74c3c;
}

.gallery-item.wide {
  grid-area: 3 / 2 / 4 / 5; /* 占据1x3区域 */
  background-color: #f39c12;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto 1fr 60px;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "footer";
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  
  .gallery-item.large {
    grid-area: auto;
    grid-column: span 2;
    grid-row: span 2;
  }
  
  .gallery-item.wide {
    grid-area: auto;
    grid-column: span 2;
  }
}

运行页面：在浏览器中打开文件，观察效果

预期效果

页面布局：使用Grid布局创建经典的header-sidebar-main-footer布局
相册网格：使用Grid布局创建不规则的相册网格，包含大图和宽图

网格布局（Grid布局，复杂布局首选） ​

14.1 Grid布局的定义 ​

什么是Grid布局？ ​

Grid布局的核心概念 ​

14.2 开启Grid布局 ​

语法 ​

示例 ​

14.3 核心属性 ​

grid-template-columns（设置列） ​

grid-template-rows（设置行） ​

grid-gap（设置间距） ​

grid-area（控制项目占据区域） ​

14.4 实战：用Grid布局制作页面首页布局、相册网格 ​

实战目标 ​

实战步骤 ​

预期效果 ​