编程马·菜鸟教程

Appearance

第12章：基础实战 ​

在本节中，我们将通过几个基础实战案例来巩固所学的Grid布局知识，包括简单网格布局、卡片网格布局、网页整体布局和跨列跨行布局。

实战1：简单网格布局 ​

12.1 网格容器搭建，设置列数与行高 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>简单网格布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 100px 100px;
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>简单网格布局</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>

12.2 设置网格间距，优化布局美观度 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>网格间距设置</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 80px);
      gap: 15px;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .item {
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>网格间距设置</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 class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    <div class="item">11</div>
    <div class="item">12</div>
  </div>
</body>
</html>

12.3 实操代码讲解与优化 ​

  • 使用 grid-template-columns 和 grid-template-rows 设置网格的列数和行高
  • 使用 gap 设置网格单元格之间的间距
  • 可以使用 repeat() 函数简化重复的列或行设置
  • 可以使用 fr 单位实现弹性布局

实战2：卡片网格布局 ​

12.4 网格容器搭建，使用auto-fill/auto-fit实现自适应列数 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>卡片网格布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .card-img {
      width: 100%;
      height: 150px;
      background-color: #3498db;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 24px;
    }
    
    .card-content {
      padding: 15px;
    }
    
    .card-title {
      margin-top: 0;
      color: #333;
    }
    
    .card-text {
      color: #666;
      font-size: 14px;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <h1>卡片网格布局</h1>
  <div class="container">
    <div class="card">
      <div class="card-img">📱</div>
      <div class="card-content">
        <h3 class="card-title">产品 1</h3>
        <p class="card-text">这是一款优秀的产品，具有多种功能和特性。</p>
      </div>
    </div>
    <div class="card">
      <div class="card-img">💻</div>
      <div class="card-content">
        <h3 class="card-title">产品 2</h3>
        <p class="card-text">这是另一款优秀的产品，具有多种功能和特性。</p>
      </div>
    </div>
    <div class="card">
      <div class="card-img">🎮</div>
      <div class="card-content">
        <h3 class="card-title">产品 3</h3>
        <p class="card-text">这是第三款优秀的产品，具有多种功能和特性。</p>
      </div>
    </div>
    <div class="card">
      <div class="card-img">📷</div>
      <div class="card-content">
        <h3 class="card-title">产品 4</h3>
        <p class="card-text">这是第四款优秀的产品，具有多种功能和特性。</p>
      </div>
    </div>
    <div class="card">
      <div class="card-img">🎵</div>
      <div class="card-content">
        <h3 class="card-title">产品 5</h3>
        <p class="card-text">这是第五款优秀的产品，具有多种功能和特性。</p>
      </div>
    </div>
    <div class="card">
      <div class="card-img">📺</div>
      <div class="card-content">
        <h3 class="card-title">产品 6</h3>
        <p class="card-text">这是第六款优秀的产品，具有多种功能和特性。</p>
      </div>
    </div>
  </div>
</body>
</html>

12.5 卡片项目尺寸控制、对齐设置 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>卡片尺寸控制</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .card-img {
      width: 100%;
      height: 180px;
      background-color: #3498db;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-size: 32px;
    }
    
    .card-content {
      padding: 20px;
      flex: 1;
    }
    
    .card-title {
      margin-top: 0;
      color: #333;
    }
    
    .card-text {
      color: #666;
      line-height: 1.5;
    }
    
    .card-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #3498db;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <h1>卡片尺寸控制</h1>
  <div class="container">
    <div class="card">
      <div class="card-img">📱</div>
      <div class="card-content">
        <h3 class="card-title">产品 1</h3>
        <p class="card-text">这是一款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img">💻</div>
      <div class="card-content">
        <h3 class="card-title">产品 2</h3>
        <p class="card-text">这是另一款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
    <div class="card">
      <div class="card-img">🎮</div>
      <div class="card-content">
        <h3 class="card-title">产品 3</h3>
        <p class="card-text">这是第三款优秀的产品，具有多种功能和特性。</p>
        <a href="#" class="card-button">了解更多</a>
      </div>
    </div>
  </div>
</body>
</html>

12.6 实操：实现响应式卡片网格，适配不同屏幕 ​

通过使用 auto-fill 或 auto-fit 结合 minmax() 函数，可以实现响应式卡片网格，自动适应不同屏幕尺寸。

实战3：网页整体布局 ​

12.7 用grid-template-areas命名区域，规划页面结构 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>网页整体布局</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .container {
      display: grid;
      grid-template-columns: 250px 1fr 200px;
      grid-template-rows: 80px 1fr 60px;
      grid-template-areas: 
        "header header header"
        "sidebar main right"
        "footer footer footer";
      height: 100vh;
    }
    
    .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .main {
      grid-area: main;
      padding: 20px;
    }
    
    .right {
      grid-area: right;
      background-color: #f9f9f9;
      padding: 20px;
    }
    
    .footer {
      grid-area: footer;
      background-color: #333;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>网站标题</h1>
      <nav>
        <a href="#" style="color: white; margin-left: 20px;">首页</a>
        <a href="#" style="color: white; margin-left: 20px;">关于</a>
        <a href="#" style="color: white; margin-left: 20px;">服务</a>
        <a href="#" style="color: white; margin-left: 20px;">联系我们</a>
      </nav>
    </header>
    <aside class="sidebar">
      <h3>侧边栏</h3>
      <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
        <li><a href="#">菜单项4</a></li>
      </ul>
    </aside>
    <main class="main">
      <h2>主体内容</h2>
      <p>这里是网站的主体内容区域。</p>
    </main>
    <aside class="right">
      <h3>右侧边栏</h3>
      <p>这里是右侧边栏内容。</p>
    </aside>
    <footer class="footer">
      <p>© 2024 版权所有</p>
    </footer>
  </div>
</body>
</html>

12.8 分配各区域尺寸，设置对齐方式 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>网页布局尺寸分配</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    
    .container {
      display: grid;
      grid-template-columns: 200px 1fr;
      grid-template-rows: 100px 1fr 80px;
      grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
      height: 100vh;
    }
    
    .header {
      grid-area: header;
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .sidebar {
      grid-area: sidebar;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .main {
      grid-area: main;
      padding: 20px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    
    .content-box {
      background-color: #e8f4f8;
      padding: 20px;
      border-radius: 8px;
    }
    
    .footer {
      grid-area: footer;
      background-color: #333;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>网站标题</h1>
    </header>
    <aside class="sidebar">
      <h3>侧边栏</h3>
      <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
      </ul>
    </aside>
    <main class="main">
      <div class="content-box">
        <h3>内容区域 1</h3>
        <p>这里是内容区域 1。</p>
      </div>
      <div class="content-box">
        <h3>内容区域 2</h3>
        <p>这里是内容区域 2。</p>
      </div>
      <div class="content-box">
        <h3>内容区域 3</h3>
        <p>这里是内容区域 3。</p>
      </div>
      <div class="content-box">
        <h3>内容区域 4</h3>
        <p>这里是内容区域 4。</p>
      </div>
    </main>
    <footer class="footer">
      <p>© 2024 版权所有</p>
    </footer>
  </div>
</body>
</html>

12.9 实操代码讲解，掌握网页整体布局思路 ​

  • 使用 grid-template-areas 定义页面区域
  • 使用 grid-template-columns 和 grid-template-rows 设置各区域的尺寸
  • 可以在主内容区域嵌套Grid布局，实现更复杂的布局
  • 可以使用Flex布局来控制区域内部的元素排列

实战4：跨列跨行布局 ​

12.10 单个项目跨列、跨行设置（span用法） ​

html
<!DOCTYPE html>
<html>
<head>
  <title>跨列跨行布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #3498db;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item1 {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
    }
    
    .item2 {
      grid-column: 3 / span 2;
      grid-row: 1 / span 1;
    }
    
    .item3 {
      grid-column: 3 / span 1;
      grid-row: 2 / span 2;
    }
    
    .item4 {
      grid-column: 4 / span 1;
      grid-row: 2 / span 1;
    }
    
    .item5 {
      grid-column: 1 / span 2;
      grid-row: 3 / span 1;
    }
    
    .item6 {
      grid-column: 4 / span 1;
      grid-row: 3 / span 1;
    }
  </style>
</head>
<body>
  <h1>跨列跨行布局</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
    <div class="item item4">项目4</div>
    <div class="item item5">项目5</div>
    <div class="item item6">项目6</div>
  </div>
</body>
</html>

12.11 调整项目位置，实现复杂不规则网格 ​

html
<!DOCTYPE html>
<html>
<head>
  <title>不规则网格布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(4, 100px);
      gap: 10px;
      background-color: #f0f0f0;
      padding: 10px;
    }
    
    .item {
      background-color: #e74c3c;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
    }
    
    .item1 {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }
    
    .item2 {
      grid-column: 3 / 6;
      grid-row: 1 / 2;
    }
    
    .item3 {
      grid-column: 3 / 4;
      grid-row: 2 / 4;
    }
    
    .item4 {
      grid-column: 4 / 6;
      grid-row: 2 / 3;
    }
    
    .item5 {
      grid-column: 1 / 3;
      grid-row: 3 / 5;
    }
    
    .item6 {
      grid-column: 4 / 6;
      grid-row: 3 / 5;
    }
  </style>
</head>
<body>
  <h1>不规则网格布局</h1>
  <div class="container">
    <div class="item item1">项目1</div>
    <div class="item item2">项目2</div>
    <div class="item item3">项目3</div>
    <div class="item item4">项目4</div>
    <div class="item item5">项目5</div>
    <div class="item item6">项目6</div>
  </div>
</body>
</html>

12.12 实操：模拟复杂内容排版（如图文混合布局） ​

html
<!DOCTYPE html>
<html>
<head>
  <title>图文混合布局</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto auto auto;
      gap: 20px;
      padding: 20px;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .header {
      grid-column: 1 / -1;
      background-color: #3498db;
      color: white;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
    }
    
    .image {
      grid-column: 1 / 2;
      grid-row: 2 / 4;
      background-color: #e8f4f8;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48px;
    }
    
    .content1 {
      grid-column: 2 / -1;
      grid-row: 2 / 3;
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
    }
    
    .content2 {
      grid-column: 2 / 4;
      grid-row: 3 / 4;
      background-color: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
    }
    
    .sidebar {
      grid-column: 4 / -1;
      grid-row: 3 / 4;
      background-color: #f0f0f0;
      padding: 20px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>图文混合布局</h1>
    </div>
    <div class="image">🖼️</div>
    <div class="content1">
      <h2>文章标题</h2>
      <p>这是文章的主要内容，包含了详细的信息和描述。</p>
    </div>
    <div class="content2">
      <h3>相关内容</h3>
      <p>这是与文章相关的内容，提供了更多的信息。</p>
    </div>
    <div class="sidebar">
      <h3>侧边栏</h3>
      <p>这里是侧边栏内容，可以放置相关链接或其他信息。</p>
    </div>
  </div>
</body>
</html>

实操练习 ​

  1. 创建一个简单的3列2行网格布局
  2. 创建一个响应式卡片网格布局，使用auto-fill和minmax()
  3. 创建一个网页整体布局，包含头部、侧边栏、主体内容和底部
  4. 创建一个跨列跨行的不规则网格布局
  5. 创建一个图文混合布局，模拟文章页面

通过本节的学习，你已经掌握了Grid布局在常见场景中的应用。这些实战案例涵盖了Web开发中最常见的布局需求，通过练习这些案例，你可以更加熟练地使用Grid布局。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建