第9章 布局革命：Grid

二维布局与竞赛任务1的正面交锋 ｜ 课型：实习课 ｜ 建议课时：3节

🏠 返回总目录 / 第9章

🎯 学习目标

知识目标

  • 掌握display:grid与grid-template-columns/rows
  • 掌握grid-area命名区域布局法
  • 掌握minmax与auto-fill自适应网格
  • 掌握竞赛任务1"CSS网格"的完整解法

能力目标

  • 能用Grid设计博客首页布局
  • 能用命名区域法快速搭建页面骨架
  • 能按竞赛标准完成网格任务

德育目标

  • 培养"先规划后编码"的设计先行意识
  • 通过竞赛真题树立标准意识与得分意识

教学重点

  • grid-template-areas命名区域法
  • fr单位与gap
  • 竞赛任务1的网格划分

教学难点

  • fr单位与auto的区别
  • minmax+auto-fill的响应式网格
  • 隐式网格与显式网格

💻 实例演示2个实例 · 可在线运行

▶ 竞赛任务1：CSS网格布局

2026复刻版竞赛真题：命名区域法实现Site Title/Nav/Post/SideBar经典布局。

新窗口运行 下载源码

操作步骤

  1. 打开demo1.html，对照竞赛任务书检查五个区域
  2. 用开发者工具查看grid-template-areas的"ASCII图"
  3. 修改grid-template-columns比例，观察主区与侧栏宽度变化
  4. 将区域名header改为masthead并同步修改，理解命名自由
  5. 尝试交换sidebar与post位置——只需改ASCII图两个词

效果观察点

  • 布局即代码：ASCII图所见即所得
  • 2fr:1fr实现2:1宽度比
  • 交换区域不用动HTML结构
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Task 1 - CSS Grid</title>
<style>
  * { margin: 0; box-sizing: border-box; }
  body { font-family: Arial, "Microsoft YaHei", sans-serif; background: #eef2f5;
         display: grid; place-items: center; min-height: 100vh; }
  .container { width: 800px; display: grid; gap: 10px;
    grid-template-areas:
      "header header"
      "nav    nav"
      "post   sidebar"
      "footer footer";
    grid-template-columns: 2fr 1fr; }
  .container > div { background: #fff; border: 2px solid #123a52; border-radius: 6px;
                     padding: 16px; color: #123a52; }
  .site-title { grid-area: header; text-align: center; background: #123a52; color: #38d6c4; }
  .nav        { grid-area: nav; display: flex; gap: 20px; justify-content: center; }
  .post       { grid-area: post; min-height: 220px; }
  .sidebar    { grid-area: sidebar; background: #e7f7f4; }
  .footer     { grid-area: footer; text-align: center; }
</style>
</head>
<body>
  <div class="container">
    <div class="site-title"><h1>Site Title</h1></div>
    <div class="nav"><span>Nav 1</span><span>Nav 2</span><span>Nav 3</span></div>
    <div class="post"><h2>Post Title</h2><p>Main Content区域：竞赛要求宽度为侧栏的两倍。</p></div>
    <div class="sidebar"><h3>Side Bar</h3><p>grid-area: sidebar</p></div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

▶ 自适应网格画廊

repeat(auto-fill,minmax())实现零媒体查询的响应式卡片网格。

新窗口运行 下载源码

操作步骤

  1. 打开demo2.html，缓慢拖窄浏览器窗口
  2. 观察列数自动减少、卡片自动重排
  3. 修改minmax(180px,1fr)中的180为120，观察变化
  4. 思考：为什么这里不需要@media

效果观察点

  • auto-fill自动填充尽可能多的列
  • minmax保证每列不小于180px
  • 一行代码替代多个媒体查询
查看核心代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自适应网格画廊</title>
<style>
  body { font-family: "Microsoft YaHei", sans-serif; margin: 0; padding: 24px; background: #f2f6f8; }
  h1 { color: #123a52; }
  .gallery { display: grid; gap: 16px;
             grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .cell { background: linear-gradient(135deg, #1b5a7a, #0f8c7f); color: #fff;
          border-radius: 10px; height: 120px; display: flex; align-items: center;
          justify-content: center; font-size: 20px; }
</style>
</head>
<body>
  <h1>拖动窗口边缘试试</h1>
  <div class="gallery">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
    <div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
    <div class="cell">7</div><div class="cell">8</div><div class="cell">9</div>
  </div>
</body>
</html>

📋 实习任务书

任务目标：按竞赛标准完成Grid博客首页，掌握命名区域法

任务内容与评分
任务1：用grid-template-areas画出博客布局草图（15分）
任务2：实现header/nav/main/aside/footer五区域（30分）
任务3：主区与侧栏实现2:1宽度比（15分）
任务4：复刻竞赛任务1并通过自查表（30分）
任务5：用auto-fill+minmax制作自适应作品网格（10分）

自我评价

📚 课后作业与预习