20个CSS3 Grid网格响应布局实战详解(附源码)

2025-11-29 19:11:13 分类：css3 热度：820 评论： 0

20个CSS3 Grid网格响应布局实战详解(附源码)

文章目录

  • 20个CSS3 Grid网格响应布局实战详解
    • 什么是CSS Grid布局？
      • Grid布局的核心概念
    • 1. 基础Grid布局
    • 2. 响应式自动填充网格
    • 3. 不对称网格布局
    • 4. 圣杯布局
    • 5. 卡片网格布局
    • 6. 瀑布流布局
    • 7. 仪表盘布局
    • 8. 产品网格
    • 9. 图文列表布局
    • 10. 表单网格布局
    • 11. 页眉导航布局
    • 12. 功能面板布局
    • 13. 博客文章布局
    • 14. 图片画廊
    • 15. 页脚布局
    • 16. 价格表布局
    • 17. 团队介绍布局
    • 18. 特性展示布局
    • 19. 时间轴布局
    • 20. 复杂网格嵌套布局
    • Grid布局的核心属性
      • 容器属性
      • 项目属性
    • 20个CSS3 Grid网格响应布局示例源码
    • 响应式设计技巧
    • 浏览器兼容性
    • 性能考虑
    • 总结

20个CSS3 Grid网格响应布局实战详解

CSS Grid布局是现代Web开发中最强大的布局系统之一，它提供了二维布局能力，让我们能够轻松创建复杂的网页布局。本文将详细介绍20个实用的Grid布局示例，每个示例都包含完整代码和使用场景分析。

什么是CSS Grid布局？

CSS Grid布局是一个二维的布局系统，专门为解决复杂网页布局而设计。与Flexbox（一维布局）不同，Grid可以同时处理行和列，让开发者能够更精确地控制页面元素的排列。

Grid布局的核心概念

  • 网格容器（Grid Container）：应用display: grid的元素
  • 网格项目（Grid Items）：网格容器的直接子元素
  • 网格线（Grid Lines）：构成网格结构的分界线
  • 网格轨道（Grid Tracks）：相邻网格线之间的空间
  • 网格单元格（Grid Cell）：相邻行和列网格线之间的空间
  • 网格区域（Grid Area）：由一个或多个网格单元格组成的矩形区域

1. 基础Grid布局

功能介绍：最简单的Grid布局，使用grid-template-columns创建固定列数的网格。

适用场景：产品展示、图片画廊、功能模块排列等需要等分布局的场景。

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

.grid-item {
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

核心要点：

  • repeat(3, 1fr) 创建3个等宽的列
  • gap 属性设置网格项之间的间距
  • fr 单位表示可用空间的比例

2. 响应式自动填充网格

功能介绍：使用auto-fill和minmax()函数创建响应式网格，自动调整列数以适应容器宽度。

适用场景：相册、博客文章列表、产品目录等需要自适应列数的场景。

.auto-fill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.auto-fill-item {
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

核心要点：

  • auto-fill 自动填充尽可能多的列
  • minmax(150px, 1fr) 设置最小150px，最大1fr的列宽
  • 完全响应式，无需媒体查询

3. 不对称网格布局

功能介绍：创建不对称的网格布局，使用grid-template-areas定义复杂的布局结构。

适用场景：新闻网站、博客首页、产品详情页等需要突出重点内容的场景。

.asymmetric-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 15px;
}

.main-content {
    grid-column: 1;
    grid-row: 1 / span 2;
    background: #4361ee;
}

.side-content {
    background: #3a0ca3;
}

/* 使用grid-template-areas的替代方案 */
.asymmetric-grid-areas {
    display: grid;
    grid-template-areas: 
        "main side1 side2"
        "main side3 side4";
    gap: 15px;
}

.main-content {
    grid-area: main;
}

.side1 { grid-area: side1; }
.side2 { grid-area: side2; }
.side3 { grid-area: side3; }
.side4 { grid-area: side4; }

核心要点：

  • grid-template-areas 提供直观的布局定义方式
  • grid-column 和 grid-row 精确控制项目位置
  • span 关键字扩展项目跨越多行/列

4. 圣杯布局

功能介绍：经典的页头、内容区、侧边栏和页脚布局，使用Grid实现更加简洁。

适用场景：内容型网站、博客、新闻门户等传统网页布局。

.holy-grail {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 200px;
    height: 100vh;
    gap: 15px;
}

.header {
    grid-column: 1 / span 3;
    background: #4361ee;
    color: white;
    padding: 15px;
    text-align: center;
}

.sidebar-left {
    background: #3a0ca3;
    color: white;
    padding: 15px;
}

.main-content {
    background: #4***9f0;
    color: white;
    padding: 15px;
}

.sidebar-right {
    background: #f72585;
    color: white;
    padding: 15px;
}

.footer {
    grid-column: 1 / span 3;
    background: #212529;
    color: white;
    padding: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .holy-grail {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
    
    .header, .footer {
        grid-column: 1;
    }
}

核心要点：

  • 使用grid-template-rows和grid-template-columns定义整体结构
  • grid-column: 1 / span 3 让元素横跨所有列
  • 媒体查询实现移动端适配

5. 卡片网格布局

功能介绍：使用Grid创建灵活的卡片布局，卡片自动适应容器宽度并保持一致的间距。

适用场景：产品展示、服务介绍、功能模块、博客文章列表等。

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

核心要点：

  • auto-fit 自动调整列数填充容器
  • minmax(250px, 1fr) 确保卡片最小宽度
  • 悬停效果增强用户体验

6. 瀑布流布局

功能介绍：使用Grid创建瀑布流布局，适合图片展示、博客文章等场景。

适用场景：Pinterest风格布局、图片社交网站、作品集展示。

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 10px;
    gap: 15px;
}

.masonry-item {
    background: #4361ee;
    color: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.item-tall {
    grid-row-end: span 30;
}

.item-medium {
    grid-row-end: span 20;
}

.item-short {
    grid-row-end: span 15;
}

核心要点：

  • grid-auto-rows: 10px 设置基础行高
  • grid-row-end: span X 控制项目高度
  • 创建自然的瀑布流效果

7. 仪表盘布局

功能介绍：适合后台管理系统的仪表盘布局，使用Grid创建复杂的多区域布局。

适用场景：管理系统、数据看板、控制面板。

.dashboard-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    gap: 15px;
}

.dashboard-header {
    grid-column: 1 / span 2;
    background: #4361ee;
    color: white;
    padding: 15px;
    text-align: center;
}

.dashboard-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
}

.stat-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.activity-panel {
    grid-column: 1 / span 3;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

核心要点：

  • 嵌套Grid实现复杂布局
  • 统计卡片使用等分布局
  • 活动面板横跨所有列

8. 产品网格

功能介绍：适合电商网站的产品网格布局，包含图片、标题、价格和操作按钮。

适用场景：电商网站、产品目录、在线商店。

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

核心要点：

  • 产品卡片统一风格
  • 悬停动效提升交互体验
  • 响应式设计适应不同屏幕

9. 图文列表布局

功能介绍：图片和文字结合的列表布局，适合新闻、博客等内容展示。

适用场景：新闻列表、博客文章、内容聚合页面。

.article-list {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 15px;
    align-items: start;
}

.article-img {
    width: 100px;
    height: 80px;
    background: #4361ee;
    border-radius: 5px;
}

.article-content {
    padding: 5px 0;
}

@media (max-width: 480px) {
    .article-list {
        grid-template-columns: 1fr;
    }
    
    .article-img {
        width: 100%;
        height: 150px;
    }
}

核心要点：

  • 固定图片尺寸，弹性内容区域
  • align-items: start 顶部对齐
  • 移动端转为单列布局

10. 表单网格布局

功能介绍：使用Grid创建多列表单布局，让表单元素在网格中整齐排列。

适用场景：注册表单、联系表单、数据录入界面。

.form-grid {
    max-width: 600px;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

@media (max-width: 480px) {
    .name-fields {
        grid-template-columns: 1fr;
    }
}

核心要点：

  • 姓名字段并排布局
  • 单个表单组占满整行
  • 移动端优化为单列

11. 页眉导航布局

功能介绍：使用Grid创建响应式页眉导航，包含Logo、导航链接和用户操作区域。

适用场景：网站头部导航、应用顶部栏。

.header-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background: #212529;
    color: white;
    padding: 15px;
    border-radius: 8px;
    gap: 15px;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.user-actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 768px) {
    .header-nav {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 10px;
        text-align: center;
    }
}

核心要点：

  • 三列布局：Logo、导航链接、用户操作
  • 导航链接居中显示
  • 移动端转为垂直布局

12. 功能面板布局

功能介绍：使用Grid创建功能面板布局，适合展示多个功能模块或数据指标。

适用场景：控制面板、功能入口、数据指标展示。

.panel-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 100px 150px;
    gap: 15px;
}

.title-panel {
    grid-column: 1 / span 4;
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.feature-panel {
    background: #3a0ca3;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

核心要点：

  • 标题面板横跨所有列
  • 功能面板等分布局
  • 明确的视觉层次

13. 博客文章布局

功能介绍：使用Grid创建博客文章布局，包含文章列表和侧边栏。

适用场景：博客网站、内容管理系统、新闻网站。

.blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.blog-post {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.blog-sidebar {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
}

核心要点：

  • 主要内容与侧边栏2:1比例
  • 文章卡片统一样式
  • 移动端单列布局

14. 图片画廊

功能介绍：使用Grid创建响应式图片画廊，图片自动调整大小并保持比例。

适用场景：作品集、相册、图片展示页面。

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    gap: 10px;
}

.gallery-item {
    background: #4361ee;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

核心要点：

  • 固定高度，弹性宽度
  • object-fit: cover 保持图片比例
  • 自动调整列数

15. 页脚布局

功能介绍：使用Grid创建多列页脚布局，包含链接、联系信息和社会媒体图标。

适用场景：网站底部、联系信息展示、快速链接。

.footer-layout {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
    background: #212529;
    color: white;
    padding: 30px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: #4361ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: translateY(-3px);
}

核心要点：

  • 四列不等宽布局
  • 社交媒体图标使用Flexbox
  • 悬停动效增强交互

16. 价格表布局

功能介绍：使用Grid创建价格表布局，适合展示不同套餐或服务等级。

适用场景：SaaS产品、服务定价、会员等级。

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.pricing-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
    border: 2px solid #e9ecef;
    position: relative;
}

.pricing-card.featured {
    border-color: #4361ee;
}

.featured-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #4361ee;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
}

核心要点：

  • 突出显示推荐套餐
  • 价格卡片统一样式
  • 徽章标识特色套餐

17. 团队介绍布局

功能介绍：使用Grid创建团队介绍布局，展示团队成员的头像和基本信息。

适用场景：关于我们页面、团队介绍、成员展示。

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.team-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

核心要点：

  • 团队成员卡片统一风格
  • 悬停效果提升交互体验
  • 响应式适应不同屏幕

18. 特性展示布局

功能介绍：使用Grid创建特性展示布局，适合展示产品功能或服务优势。

适用场景：产品特性展示、服务优势、功能说明。

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 15px;
    align-items: start;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: #4361ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

核心要点：

  • 图标与内容并排布局
  • 图标使用圆形设计
  • 移动端单列布局

19. 时间轴布局

功能介绍：使用Grid创建时间轴布局，适合展示历史事件或项目进展。

适用场景：公司历史、项目时间线、发展历程。

.timeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
}

.timeline-item {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.timeline-marker {
    width: 20px;
    height: 20px;
    background: #4361ee;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .timeline {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .timeline-marker {
        display: none;
    }
}

核心要点：

  • 三列布局创建时间轴效果
  • 圆形标记标识时间点
  • 移动端简化布局

20. 复杂网格嵌套布局

功能介绍：展示Grid嵌套使用的能力，创建复杂的多级网格布局结构。

适用场景：复杂的管理界面、数据看板、多功能应用。

.***plex-nested {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    gap: 15px;
}

.***plex-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
}

.main-title {
    grid-column: 1 / span 2;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sub-content {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

核心要点：

  • 外层Grid定义整体结构
  • 内层Grid创建详细布局
  • 多层嵌套实现复杂界面

Grid布局的核心属性

容器属性

  • display: grid - 定义Grid容器
  • grid-template-columns - 定义列轨道大小
  • grid-template-rows - 定义行轨道大小
  • grid-template-areas - 使用命名区域定义布局
  • gap - 设置网格项之间的间距
  • justify-items - 网格项在单元格内的水平对齐
  • align-items - 网格项在单元格内的垂直对齐
  • justify-content - 整个网格在容器内的水平对齐
  • align-content - 整个网格在容器内的垂直对齐

项目属性

  • grid-column - 指定项目在列上的位置
  • grid-row - 指定项目在行上的位置
  • grid-area - 指定项目在命名区域中的位置
  • justify-self - 单个项目的水平对齐
  • align-self - 单个项目的垂直对齐

20个CSS3 Grid网格响应布局示例源码

<!DOCTYPE html>
<html lang="zh-***">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20个CSS3 Grid网格响应布局示例</title>
    <!-- 引入Prism.js代码高亮 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.***/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css">
    <script src="https://cdnjs.cloudflare.***/ajax/libs/prism/1.25.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.***/ajax/libs/prism/1.25.0/***ponents/prism-css.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --a***ent: #f72585;
            --light: #f8f9fa;
            --dark: #212529;
            --su***ess: #4***9f0;
            --warning: #f8961e;
            --danger: #e63946;
            --info: #7209b7;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--dark);
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 40px 0;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border-radius: 15px;
            box-shadow: var(--shadow);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
        }
        
        .description {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        .demo-section {
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin-bottom: 40px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .demo-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .demo-title {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--secondary);
            border-bottom: 3px solid var(--primary);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .demo-title::before {
            content: "•";
            color: var(--a***ent);
            font-size: 2rem;
        }
        
        .demo-description {
            margin-bottom: 25px;
            color: #555;
            line-height: 1.7;
            font-size: 1.1rem;
        }
        
        .demo-container {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 25px;
            background: var(--light);
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .code-container {
            background: #2d2d2d;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 20px;
        }
        
        .code-header {
            background: #1a1a1a;
            color: #f8f9fa;
            padding: 12px 20px;
            font-size: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .copy-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .copy-btn:hover {
            background: var(--secondary);
        }
        
        .code-content {
            padding: 20px;
            overflow-x: auto;
        }
        
        pre[class*="language-"] {
            margin: 0;
            background: transparent;
            font-size: 0.95rem;
        }
        
        /* Grid演示样式 */
        .grid-demo {
            display: grid;
            gap: 15px;
        }
        
        .demo-item {
            background: var(--primary);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .demo-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        
        .demo-card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        .demo-nav {
            background: var(--dark);
            color: white;
            padding: 15px;
            border-radius: 8px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            width: 100%;
        }
        
        .demo-nav a {
            color: white;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .demo-nav a:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        
        .demo-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        .btn:hover {
            background: var(--secondary);
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 30px;
            color: #6c757d;
            border-top: 1px solid #e9ecef;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.2rem;
            }
            
            .demo-title {
                font-size: 1.5rem;
            }
            
            .demo-container {
                padding: 15px;
            }
        }
        
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .demo-section {
                padding: 20px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
        }
   .demo-toc {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 200px;
    }
    .toc-section {
            background: white;
            border-radius: 15px;
            padding: 10px;
            margin-bottom: 40px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .toc-section:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .toc-title {
            font-size: 1rem;
            margin-bottom: 15px;
            color: var(--secondary);
            border-bottom: 3px solid var(--primary);
            padding: 10px 0;
            align-items: center;
        }

        .toc-title::before {
            content: "•";
            color: var(--a***ent);
            font-size: 1rem;
        }
        .toc-list{

            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .toc-list a {
            color: var(--secondary);
            text-decoration: none;
            transition: var(--transition);
        }

        .toc-list a:hover {
            color: var(--primary);
        }
    </style>
</head>
<body>
<div class="demo-toc">
 <div class="toc-section">

            <h3  class="toc-title">目录</h3>
            <div class="toc-list" id="toc-list">
            </div>
 </div>
</div>
    <div class="container">
        <header>
            <h1>20个CSS3 Grid网格响应布局示例</h1>
            <p class="description">使用纯CSS3 Grid实现的高质量响应式布局，涵盖各种常见页面布局场景</p>
        </header>
        
        <!-- 示例1: 基础Grid布局 -->
        <div class="demo-section">
            <h2 class="demo-title">1. 基础Grid布局</h2>
            <p class="demo-description">最简单的Grid布局，使用grid-template-columns创建固定列数的网格。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(3, 1fr);">
                    <div class="demo-item">项目 1</div>
                    <div class="demo-item">项目 2</div>
                    <div class="demo-item">项目 3</div>
                    <div class="demo-item">项目 4</div>
                    <div class="demo-item">项目 5</div>
                    <div class="demo-item">项目 6</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.basic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.grid-item {
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例2: 响应式自动填充网格 -->
        <div class="demo-section">
            <h2 class="demo-title">2. 响应式自动填充网格</h2>
            <p class="demo-description">使用auto-fill和minmax()函数创建响应式网格，自动调整列数以适应容器宽度。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
                    <div class="demo-item" style="background: var(--primary);">项目 1</div>
                    <div class="demo-item" style="background: var(--secondary);">项目 2</div>
                    <div class="demo-item" style="background: var(--a***ent);">项目 3</div>
                    <div class="demo-item" style="background: var(--su***ess);">项目 4</div>
                    <div class="demo-item" style="background: var(--warning);">项目 5</div>
                    <div class="demo-item" style="background: var(--danger);">项目 6</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.auto-fill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.auto-fill-item {
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例3: 不对称网格布局 -->
        <div class="demo-section">
            <h2 class="demo-title">3. 不对称网格布局</h2>
            <p class="demo-description">创建不对称的网格布局，使用grid-template-areas定义复杂的布局结构。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 100px 100px; gap: 15px;">
                    <div class="demo-item" style="grid-column: 1; grid-row: 1 / span 2; background: var(--primary);">主要内容</div>
                    <div class="demo-item" style="grid-column: 2; grid-row: 1; background: var(--secondary);">次要内容 1</div>
                    <div class="demo-item" style="grid-column: 3; grid-row: 1; background: var(--a***ent);">次要内容 2</div>
                    <div class="demo-item" style="grid-column: 2; grid-row: 2; background: var(--su***ess);">次要内容 3</div>
                    <div class="demo-item" style="grid-column: 3; grid-row: 2; background: var(--warning);">次要内容 4</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.asymmetric-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 15px;
}

.main-content {
    grid-column: 1;
    grid-row: 1 / span 2;
    background: #4361ee;
}

.side-content {
    background: #3a0ca3;
}

/* 或者使用grid-template-areas */
.asymmetric-grid-areas {
    display: grid;
    grid-template-areas: 
        "main side1 side2"
        "main side3 side4";
    gap: 15px;
}

.main-content {
    grid-area: main;
}

.side1 { grid-area: side1; }
.side2 { grid-area: side2; }
.side3 { grid-area: side3; }
.side4 { grid-area: side4; }</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例4: 圣杯布局 -->
        <div class="demo-section">
            <h2 class="demo-title">4. 圣杯布局</h2>
            <p class="demo-description">经典的页头、内容区、侧边栏和页脚布局，使用Grid实现更加简洁。</p>
            
            <div class="demo-container">
                <div style="display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 200px 1fr 200px; height: 300px; gap: 15px;">
                    <header style="grid-column: 1 / span 3; background: var(--primary); color: white; padding: 15px; border-radius: 8px; text-align: center;">页头</header>
                    <aside style="background: var(--secondary); color: white; padding: 15px; border-radius: 8px;">左侧边栏</aside>
                    <main style="background: var(--su***ess); color: white; padding: 15px; border-radius: 8px;">主内容区</main>
                    <aside style="background: var(--a***ent); color: white; padding: 15px; border-radius: 8px;">右侧边栏</aside>
                    <footer style="grid-column: 1 / span 3; background: var(--dark); color: white; padding: 15px; border-radius: 8px; text-align: center;">页脚</footer>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.holy-grail {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 200px;
    height: 100vh;
    gap: 15px;
}

.header {
    grid-column: 1 / span 3;
    background: #4361ee;
    color: white;
    padding: 15px;
    text-align: center;
}

.sidebar-left {
    background: #3a0ca3;
    color: white;
    padding: 15px;
}

.main-content {
    background: #4***9f0;
    color: white;
    padding: 15px;
}

.sidebar-right {
    background: #f72585;
    color: white;
    padding: 15px;
}

.footer {
    grid-column: 1 / span 3;
    background: #212529;
    color: white;
    padding: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .holy-grail {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
    
    .header, .footer {
        grid-column: 1;
    }
    
    .sidebar-left, .sidebar-right {
        grid-row: auto;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例5: 卡片网格布局 -->
        <div class="demo-section">
            <h2 class="demo-title">5. 卡片网格布局</h2>
            <p class="demo-description">使用Grid创建灵活的卡片布局，卡片自动适应容器宽度并保持一致的间距。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
                    <div class="demo-card">
                        <div style="height: 120px; background: var(--primary); border-radius: 5px; margin-bottom: 10px;"></div>
                        <h3 style="margin-bottom: 10px;">卡片标题</h3>
                        <p style="color: #666; margin-bottom: 15px;">这是一张卡片的描述内容，可以包含文字、图片等信息。</p>
                        <button class="btn">了解更多</button>
                    </div>
                    <div class="demo-card">
                        <div style="height: 120px; background: var(--secondary); border-radius: 5px; margin-bottom: 10px;"></div>
                        <h3 style="margin-bottom: 10px;">卡片标题</h3>
                        <p style="color: #666; margin-bottom: 15px;">这是一张卡片的描述内容，可以包含文字、图片等信息。</p>
                        <button class="btn">了解更多</button>
                    </div>
                    <div class="demo-card">
                        <div style="height: 120px; background: var(--a***ent); border-radius: 5px; margin-bottom: 10px;"></div>
                        <h3 style="margin-bottom: 10px;">卡片标题</h3>
                        <p style="color: #666; margin-bottom: 15px;">这是一张卡片的描述内容，可以包含文字、图片等信息。</p>
                        <button class="btn">了解更多</button>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.card-img {
    height: 120px;
    background: #4361ee;
    border-radius: 5px;
    margin-bottom: 10px;
}

.card-title {
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.card-description {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例6: 瀑布流布局 -->
        <div class="demo-section">
            <h2 class="demo-title">6. 瀑布流布局</h2>
            <p class="demo-description">使用Grid创建瀑布流布局，适合图片展示、博客文章等场景。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 10px;">
                    <div class="demo-item" style="grid-row-end: span 30; height: 150px; background: var(--primary);">项目 1</div>
                    <div class="demo-item" style="grid-row-end: span 20; height: 100px; background: var(--secondary);">项目 2</div>
                    <div class="demo-item" style="grid-row-end: span 35; height: 175px; background: var(--a***ent);">项目 3</div>
                    <div class="demo-item" style="grid-row-end: span 25; height: 125px; background: var(--su***ess);">项目 4</div>
                    <div class="demo-item" style="grid-row-end: span 30; height: 150px; background: var(--warning);">项目 5</div>
                    <div class="demo-item" style="grid-row-end: span 20; height: 100px; background: var(--danger);">项目 6</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 10px;
    gap: 15px;
}

.masonry-item {
    background: #4361ee;
    color: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 不同高度的项目 */
.item-tall {
    grid-row-end: span 30;
}

.item-medium {
    grid-row-end: span 20;
}

.item-short {
    grid-row-end: span 15;
}

@media (max-width: 768px) {
    .masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例7: 仪表盘布局 -->
        <div class="demo-section">
            <h2 class="demo-title">7. 仪表盘布局</h2>
            <p class="demo-description">适合后台管理系统的仪表盘布局，使用Grid创建复杂的多区域布局。</p>
            
            <div class="demo-container">
                <div style="display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; height: 350px; gap: 15px;">
                    <header style="grid-column: 1 / span 2; background: var(--primary); color: white; padding: 15px; border-radius: 8px; text-align: center;">仪表盘头部</header>
                    <aside style="background: var(--dark); color: white; padding: 15px; border-radius: 8px;">
                        <h3 style="margin-bottom: 15px;">导航菜单</h3>
                        <ul style="list-style: none;">
                            <li style="padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">仪表盘</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">用户管理</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">内容管理</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">系统设置</li>
                        </ul>
                    </aside>
                    <main style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; padding: 15px; background: var(--light); border-radius: 8px;">
                        <div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center;">
                            <h4 style="color: var(--primary); font-size: 1.5rem; margin-bottom: 5px;">128</h4>
                            <p>用户总数</p>
                        </div>
                        <div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center;">
                            <h4 style="color: var(--secondary); font-size: 1.5rem; margin-bottom: 5px;">56</h4>
                            <p>新增用户</p>
                        </div>
                        <div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); text-align: center;">
                            <h4 style="color: var(--a***ent); font-size: 1.5rem; margin-bottom: 5px;">24</h4>
                            <p>在线用户</p>
                        </div>
                        <div style="grid-column: 1 / span 3; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                            <h4 style="margin-bottom: 10px;">最近活动</h4>
                            <p>这里是最近的活动记录...</p>
                        </div>
                    </main>
                    <footer style="grid-column: 1 / span 2; background: var(--dark); color: white; padding: 15px; border-radius: 8px; text-align: center;">页脚信息</footer>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.dashboard-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    gap: 15px;
}

.dashboard-header {
    grid-column: 1 / span 2;
    background: #4361ee;
    color: white;
    padding: 15px;
    text-align: center;
}

.dashboard-sidebar {
    background: #212529;
    color: white;
    padding: 15px;
}

.dashboard-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
}

.stat-card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
}

.activity-panel {
    grid-column: 1 / span 3;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.dashboard-footer {
    grid-column: 1 / span 2;
    background: #212529;
    color: white;
    padding: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
    }
    
    .dashboard-header, .dashboard-footer {
        grid-column: 1;
    }
    
    .activity-panel {
        grid-column: 1;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例8: 产品网格 -->
        <div class="demo-section">
            <h2 class="demo-title">8. 产品网格</h2>
            <p class="demo-description">适合电商网站的产品网格布局，包含图片、标题、价格和操作按钮。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
                    <div class="demo-card" style="text-align: center;">
                        <div style="height: 150px; background: var(--primary); border-radius: 5px; margin-bottom: 10px;"></div>
                        <h3 style="margin-bottom: 10px;">产品名称</h3>
                        <p style="color: #e74c3c; font-weight: bold; font-size: 1.2rem; margin-bottom: 15px;">￥199.00</p>
                        <button class="btn">加入购物车</button>
                    </div>
                    <div class="demo-card" style="text-align: center;">
                        <div style="height: 150px; background: var(--secondary); border-radius: 5px; margin-bottom: 10px;"></div>
                        <h3 style="margin-bottom: 10px;">产品名称</h3>
                        <p style="color: #e74c3c; font-weight: bold; font-size: 1.2rem; margin-bottom: 15px;">￥299.00</p>
                        <button class="btn">加入购物车</button>
                    </div>
                    <div class="demo-card" style="text-align: center;">
                        <div style="height: 150px; background: var(--a***ent); border-radius: 5px; margin-bottom: 10px;"></div>
                        <h3 style="margin-bottom: 10px;">产品名称</h3>
                        <p style="color: #e74c3c; font-weight: bold; font-size: 1.2rem; margin-bottom: 15px;">￥399.00</p>
                        <button class="btn">加入购物车</button>
                    </div>
                    <div class="demo-card" style="text-align: center;">
                        <div style="height: 150px; background: var(--su***ess); border-radius: 5px; margin-bottom: 10px;"></div>
                        <h3 style="margin-bottom: 10px;">产品名称</h3>
                        <p style="color: #e74c3c; font-weight: bold; font-size: 1.2rem; margin-bottom: 15px;">￥499.00</p>
                        <button class="btn">加入购物车</button>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.product-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.product-img {
    height: 150px;
    background: #4361ee;
    border-radius: 5px;
    margin-bottom: 10px;
}

.product-name {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.product-price {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 15px;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例9: 图文列表布局 -->
        <div class="demo-section">
            <h2 class="demo-title">9. 图文列表布局</h2>
            <p class="demo-description">图片和文字结合的列表布局，适合新闻、博客等内容展示。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: 100px 1fr; gap: 15px; align-items: start;">
                    <div style="width: 100px; height: 80px; background: var(--primary); border-radius: 5px;"></div>
                    <div>
                        <h4 style="margin-bottom: 5px;">文章标题</h4>
                        <p style="color: #666; font-size: 0.9rem;">这是一段文章的描述内容，简要介绍文章的主要内容和亮点。</p>
                    </div>
                    <div style="width: 100px; height: 80px; background: var(--secondary); border-radius: 5px;"></div>
                    <div>
                        <h4 style="margin-bottom: 5px;">文章标题</h4>
                        <p style="color: #666; font-size: 0.9rem;">这是一段文章的描述内容，简要介绍文章的主要内容和亮点。</p>
                    </div>
                    <div style="width: 100px; height: 80px; background: var(--a***ent); border-radius: 5px;"></div>
                    <div>
                        <h4 style="margin-bottom: 5px;">文章标题</h4>
                        <p style="color: #666; font-size: 0.9rem;">这是一段文章的描述内容，简要介绍文章的主要内容和亮点。</p>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.article-list {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 15px;
    align-items: start;
}

.article-img {
    width: 100px;
    height: 80px;
    background: #4361ee;
    border-radius: 5px;
}

.article-content {
    padding: 5px 0;
}

.article-title {
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.article-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 480px) {
    .article-list {
        grid-template-columns: 1fr;
    }
    
    .article-img {
        width: 100%;
        height: 150px;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例10: 表单网格布局 -->
        <div class="demo-section">
            <h2 class="demo-title">10. 表单网格布局</h2>
            <p class="demo-description">使用Grid创建多列表单布局，让表单元素在网格中整齐排列。</p>
            
            <div class="demo-container">
                <div class="demo-form" style="max-width: 600px;">
                    <h3 style="margin-bottom: 20px; text-align: center;">用户注册</h3>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                        <div class="form-group">
                            <label for="firstname">名字</label>
                            <input type="text" id="firstname" placeholder="请输入名字">
                        </div>
                        <div class="form-group">
                            <label for="lastname">姓氏</label>
                            <input type="text" id="lastname" placeholder="请输入姓氏">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" placeholder="请输入邮箱地址">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" placeholder="请输入密码">
                    </div>
                    <button class="btn" style="width: 100%;">注册</button>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.form-grid {
    max-width: 600px;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    background: #4361ee;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

@media (max-width: 480px) {
    .name-fields {
        grid-template-columns: 1fr;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例11: 页眉导航布局 -->
        <div class="demo-section">
            <h2 class="demo-title">11. 页眉导航布局</h2>
            <p class="demo-description">使用Grid创建响应式页眉导航，包含Logo、导航链接和用户操作区域。</p>
            
            <div class="demo-container">
                <div class="demo-nav">
                    <div style="font-weight: bold; font-size: 1.2rem;">LOGO</div>
                    <div style="display: flex; justify-content: center; gap: 10px;">
                        <a href="#">首页</a>
                        <a href="#">产品</a>
                        <a href="#">服务</a>
                        <a href="#">关于</a>
                        <a href="#">联系</a>
                    </div>
                    <div style="display: flex; gap: 10px;">
                        <a href="#">登录</a>
                        <a href="#" style="background: var(--primary);">注册</a>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.header-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background: #212529;
    color: white;
    padding: 15px;
    border-radius: 8px;
    gap: 15px;
}

.nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background 0.3s;
}

.nav-links a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.user-actions {
    display: flex;
    gap: 10px;
}

.user-actions a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background 0.3s;
}

.user-actions a:last-child {
    background: #4361ee;
}

@media (max-width: 768px) {
    .header-nav {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 10px;
        text-align: center;
    }
    
    .nav-links {
        flex-wrap: wrap;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例12: 功能面板布局 -->
        <div class="demo-section">
            <h2 class="demo-title">12. 功能面板布局</h2>
            <p class="demo-description">使用Grid创建功能面板布局，适合展示多个功能模块或数据指标。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px 150px; gap: 15px;">
                    <div class="demo-item" style="grid-column: 1 / span 4; background: var(--primary);">标题面板</div>
                    <div class="demo-item" style="background: var(--secondary);">功能 1</div>
                    <div class="demo-item" style="background: var(--a***ent);">功能 2</div>
                    <div class="demo-item" style="background: var(--su***ess);">功能 3</div>
                    <div class="demo-item" style="background: var(--warning);">功能 4</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.panel-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 100px 150px;
    gap: 15px;
}

.title-panel {
    grid-column: 1 / span 4;
    background: #4361ee;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.feature-panel {
    background: #3a0ca3;
    color: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

@media (max-width: 768px) {
    .panel-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100px 150px 150px;
    }
    
    .title-panel {
        grid-column: 1 / span 2;
    }
}

@media (max-width: 480px) {
    .panel-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 100px repeat(4, 150px);
    }
    
    .title-panel {
        grid-column: 1;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例13: 博客文章布局 -->
        <div class="demo-section">
            <h2 class="demo-title">13. 博客文章布局</h2>
            <p class="demo-description">使用Grid创建博客文章布局，包含文章列表和侧边栏。</p>
            
            <div class="demo-container">
                <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 30px;">
                    <div>
                        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.1); margin-bottom: 20px;">
                            <h3 style="margin-bottom: 10px;">博客文章标题</h3>
                            <p style="color: #666; margin-bottom: 15px;">这是一篇博客文章的摘要内容，简要介绍文章的主要观点和内容。</p>
                            <button class="btn">阅读更多</button>
                        </div>
                        <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);">
                            <h3 style="margin-bottom: 10px;">博客文章标题</h3>
                            <p style="color: #666; margin-bottom: 15px;">这是一篇博客文章的摘要内容，简要介绍文章的主要观点和内容。</p>
                            <button class="btn">阅读更多</button>
                        </div>
                    </div>
                    <aside style="background: var(--light); padding: 20px; border-radius: 8px;">
                        <h4 style="margin-bottom: 15px;">侧边栏</h4>
                        <div style="margin-bottom: 15px;">
                            <h5>分类</h5>
                            <ul style="list-style: none; margin-top: 10px;">
                                <li style="padding: 5px 0;">技术 (15)</li>
                                <li style="padding: 5px 0;">生活 (8)</li>
                                <li style="padding: 5px 0;">旅行 (5)</li>
                            </ul>
                        </div>
                        <div>
                            <h5>标签</h5>
                            <div style="display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;">
                                <span style="background: var(--primary); color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem;">CSS</span>
                                <span style="background: var(--secondary); color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem;">JavaScript</span>
                                <span style="background: var(--a***ent); color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem;">HTML</span>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.blog-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.blog-posts {
    /* 文章列表样式 */
}

.blog-post {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.blog-sidebar {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.categories-list {
    list-style: none;
    margin-top: 10px;
}

.categories-list li {
    padding: 5px 0;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.tag {
    background: #4361ee;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例14: 图片画廊 -->
        <div class="demo-section">
            <h2 class="demo-title">14. 图片画廊</h2>
            <p class="demo-description">使用Grid创建响应式图片画廊，图片自动调整大小并保持比例。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 150px; gap: 10px;">
                    <div class="demo-item" style="background: var(--primary);">图片 1</div>
                    <div class="demo-item" style="background: var(--secondary);">图片 2</div>
                    <div class="demo-item" style="background: var(--a***ent);">图片 3</div>
                    <div class="demo-item" style="background: var(--su***ess);">图片 4</div>
                    <div class="demo-item" style="background: var(--warning);">图片 5</div>
                    <div class="demo-item" style="background: var(--danger);">图片 6</div>
                    <div class="demo-item" style="background: var(--info);">图片 7</div>
                    <div class="demo-item" style="background: var(--primary);">图片 8</div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    gap: 10px;
}

.gallery-item {
    background: #4361ee;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 不同尺寸的图片 */
.item-wide {
    grid-column: span 2;
}

.item-tall {
    grid-row: span 2;
}

.item-large {
    grid-column: span 2;
    grid-row: span 2;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例15: 页脚布局 -->
        <div class="demo-section">
            <h2 class="demo-title">15. 页脚布局</h2>
            <p class="demo-description">使用Grid创建多列页脚布局，包含链接、联系信息和社会媒体图标。</p>
            
            <div class="demo-container">
                <div style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; background: var(--dark); color: white; padding: 30px; border-radius: 8px;">
                    <div>
                        <h4 style="margin-bottom: 15px;">公司名称</h4>
                        <p style="color: #adb5bd; line-height: 1.6;">我们是一家专注于提供高质量产品和服务的公司，致力于为客户创造价值。</p>
                    </div>
                    <div>
                        <h5 style="margin-bottom: 15px;">快速链接</h5>
                        <ul style="list-style: none; color: #adb5bd;">
                            <li style="padding: 5px 0;"><a href="#" style="color: #adb5bd; text-decoration: none;">首页</a></li>
                            <li style="padding: 5px 0;"><a href="#" style="color: #adb5bd; text-decoration: none;">关于我们</a></li>
                            <li style="padding: 5px 0;"><a href="#" style="color: #adb5bd; text-decoration: none;">服务</a></li>
                            <li style="padding: 5px 0;"><a href="#" style="color: #adb5bd; text-decoration: none;">联系</a></li>
                        </ul>
                    </div>
                    <div>
                        <h5 style="margin-bottom: 15px;">联系我们</h5>
                        <ul style="list-style: none; color: #adb5bd;">
                            <li style="padding: 5px 0;">地址: 某市某区某街道</li>
                            <li style="padding: 5px 0;">电话: 123-456-7890</li>
                            <li style="padding: 5px 0;">邮箱: info@example.***</li>
                        </ul>
                    </div>
                    <div>
                        <h5 style="margin-bottom: 15px;">关注我们</h5>
                        <div style="display: flex; gap: 10px;">
                            <div style="width: 40px; height: 40px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;">F</div>
                            <div style="width: 40px; height: 40px; background: var(--info); border-radius: 50%; display: flex; align-items: center; justify-content: center;">T</div>
                            <div style="width: 40px; height: 40px; background: var(--a***ent); border-radius: 50%; display: flex; align-items: center; justify-content: center;">I</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.footer-layout {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
    background: #212529;
    color: white;
    padding: 30px;
}

.footer-section h4, .footer-section h5 {
    margin-bottom: 15px;
}

.footer-links {
    list-style: none;
    color: #adb5bd;
}

.footer-links li {
    padding: 5px 0;
}

.footer-links a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: white;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: #4361ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.social-icon:hover {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .footer-layout {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .footer-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-icons {
        justify-content: center;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例16: 价格表布局 -->
        <div class="demo-section">
            <h2 class="demo-title">16. 价格表布局</h2>
            <p class="demo-description">使用Grid创建价格表布局，适合展示不同套餐或服务等级。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
                    <div class="demo-card" style="text-align: center; border: 2px solid #e9ecef;">
                        <h3 style="margin-bottom: 10px;">基础版</h3>
                        <p style="color: var(--primary); font-size: 1.5rem; font-weight: bold; margin-bottom: 15px;">￥99/月</p>
                        <ul style="list-style: none; margin-bottom: 20px; text-align: left;">
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 基础功能</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 5GB存储空间</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 基础支持</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✗ 高级功能</li>
                        </ul>
                        <button class="btn">选择计划</button>
                    </div>
                    <div class="demo-card" style="text-align: center; border: 2px solid var(--primary); position: relative;">
                        <div style="position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--primary); color: white; padding: 5px 15px; border-radius: 15px; font-size: 0.8rem;">最受欢迎</div>
                        <h3 style="margin-bottom: 10px;">专业版</h3>
                        <p style="color: var(--primary); font-size: 1.5rem; font-weight: bold; margin-bottom: 15px;">￥199/月</p>
                        <ul style="list-style: none; margin-bottom: 20px; text-align: left;">
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 所有基础功能</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 50GB存储空间</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 优先支持</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 高级功能</li>
                        </ul>
                        <button class="btn" style="background: var(--primary);">选择计划</button>
                    </div>
                    <div class="demo-card" style="text-align: center; border: 2px solid #e9ecef;">
                        <h3 style="margin-bottom: 10px;">企业版</h3>
                        <p style="color: var(--primary); font-size: 1.5rem; font-weight: bold; margin-bottom: 15px;">￥399/月</p>
                        <ul style="list-style: none; margin-bottom: 20px; text-align: left;">
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 所有专业功能</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 无限存储空间</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 24/7专属支持</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid #e9ecef;">✓ 定制功能</li>
                        </ul>
                        <button class="btn">选择计划</button>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.pricing-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    text-align: center;
    border: 2px solid #e9ecef;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.pricing-card.featured {
    border-color: #4361ee;
}

.featured-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #4361ee;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
}

.pricing-title {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.pricing-price {
    color: #4361ee;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 20px;
    text-align: left;
}

.pricing-features li {
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例17: 团队介绍布局 -->
        <div class="demo-section">
            <h2 class="demo-title">17. 团队介绍布局</h2>
            <p class="demo-description">使用Grid创建团队介绍布局，展示团队成员的头像和基本信息。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
                    <div class="demo-card" style="text-align: center;">
                        <div style="width: 100px; height: 100px; background: var(--primary); border-radius: 50%; margin: 0 auto 15px;"></div>
                        <h4 style="margin-bottom: 5px;">张三</h4>
                        <p style="color: var(--primary); margin-bottom: 10px;">前端开发工程师</p>
                        <p style="color: #666; font-size: 0.9rem;">负责网站前端开发和用户体验优化。</p>
                    </div>
                    <div class="demo-card" style="text-align: center;">
                        <div style="width: 100px; height: 100px; background: var(--secondary); border-radius: 50%; margin: 0 auto 15px;"></div>
                        <h4 style="margin-bottom: 5px;">李四</h4>
                        <p style="color: var(--primary); margin-bottom: 10px;">后端开发工程师</p>
                        <p style="color: #666; font-size: 0.9rem;">负责服务器端开发和数据库设计。</p>
                    </div>
                    <div class="demo-card" style="text-align: center;">
                        <div style="width: 100px; height: 100px; background: var(--a***ent); border-radius: 50%; margin: 0 auto 15px;"></div>
                        <h4 style="margin-bottom: 5px;">王五</h4>
                        <p style="color: var(--primary); margin-bottom: 10px;">UI/UX设计师</p>
                        <p style="color: #666; font-size: 0.9rem;">负责产品界面设计和用户体验优化。</p>
                    </div>
                    <div class="demo-card" style="text-align: center;">
                        <div style="width: 100px; height: 100px; background: var(--su***ess); border-radius: 50%; margin: 0 auto 15px;"></div>
                        <h4 style="margin-bottom: 5px;">赵六</h4>
                        <p style="color: var(--primary); margin-bottom: 10px;">产品经理</p>
                        <p style="color: #666; font-size: 0.9rem;">负责产品规划和需求分析。</p>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.team-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.team-avatar {
    width: 100px;
    height: 100px;
    background: #4361ee;
    border-radius: 50%;
    margin: 0 auto 15px;
}

.team-name {
    margin-bottom: 5px;
    font-size: 1.2rem;
}

.team-role {
    color: #4361ee;
    margin-bottom: 10px;
    font-weight: 500;
}

.team-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例18: 特性展示布局 -->
        <div class="demo-section">
            <h2 class="demo-title">18. 特性展示布局</h2>
            <p class="demo-description">使用Grid创建特性展示布局，适合展示产品功能或服务优势。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: repeat(2, 1fr); gap: 30px;">
                    <div style="display: grid; grid-template-columns: 60px 1fr; gap: 15px; align-items: start;">
                        <div style="width: 60px; height: 60px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white;">1</div>
                        <div>
                            <h4 style="margin-bottom: 10px;">易用性</h4>
                            <p style="color: #666;">我们的产品设计简洁直观，用户可以快速上手，无需复杂的学习过程。</p>
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 60px 1fr; gap: 15px; align-items: start;">
                        <div style="width: 60px; height: 60px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white;">2</div>
                        <div>
                            <h4 style="margin-bottom: 10px;">高性能</h4>
                            <p style="color: #666;">采用最新技术架构，确保系统运行流畅，响应迅速，处理大量数据无压力。</p>
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 60px 1fr; gap: 15px; align-items: start;">
                        <div style="width: 60px; height: 60px; background: var(--a***ent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white;">3</div>
                        <div>
                            <h4 style="margin-bottom: 10px;">安全性</h4>
                            <p style="color: #666;">多重安全防护机制，保障用户数据和隐私安全，符合行业安全标准。</p>
                        </div>
                    </div>
                    <div style="display: grid; grid-template-columns: 60px 1fr; gap: 15px; align-items: start;">
                        <div style="width: 60px; height: 60px; background: var(--su***ess); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white;">4</div>
                        <div>
                            <h4 style="margin-bottom: 10px;">可扩展性</h4>
                            <p style="color: #666;">系统架构灵活，支持功能模块扩展，满足企业不同阶段的业务需求。</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.feature-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 15px;
    align-items: start;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: #4361ee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.feature-content h4 {
    margin-bottom: 10px;
}

.feature-content p {
    color: #666;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例19: 时间轴布局 -->
        <div class="demo-section">
            <h2 class="demo-title">19. 时间轴布局</h2>
            <p class="demo-description">使用Grid创建时间轴布局，适合展示历史事件或项目进展。</p>
            
            <div class="demo-container">
                <div class="grid-demo" style="grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center;">
                    <div class="demo-card">
                        <h4 style="margin-bottom: 10px;">项目启动</h4>
                        <p style="color: #666; margin-bottom: 10px;">2023年1月</p>
                        <p style="color: #666; font-size: 0.9rem;">项目正式启动，组建核心团队，明确项目目标和范围。</p>
                    </div>
                    <div style="width: 20px; height: 20px; background: var(--primary); border-radius: 50%;"></div>
                    <div></div>
                    
                    <div></div>
                    <div style="width: 20px; height: 20px; background: var(--secondary); border-radius: 50%;"></div>
                    <div class="demo-card">
                        <h4 style="margin-bottom: 10px;">需求分析</h4>
                        <p style="color: #666; margin-bottom: 10px;">2023年2月</p>
                        <p style="color: #666; font-size: 0.9rem;">深入分析用户需求，制定产品功能规格和设计方向。</p>
                    </div>
                    
                    <div class="demo-card">
                        <h4 style="margin-bottom: 10px;">设计与开发</h4>
                        <p style="color: #666; margin-bottom: 10px;">2023年3月-5月</p>
                        <p style="color: #666; font-size: 0.9rem;">完成产品UI/UX设计，开始核心功能开发。</p>
                    </div>
                    <div style="width: 20px; height: 20px; background: var(--a***ent); border-radius: 50%;"></div>
                    <div></div>
                    
                    <div></div>
                    <div style="width: 20px; height: 20px; background: var(--su***ess); border-radius: 50%;"></div>
                    <div class="demo-card">
                        <h4 style="margin-bottom: 10px;">测试与优化</h4>
                        <p style="color: #666; margin-bottom: 10px;">2023年6月</p>
                        <p style="color: #666; font-size: 0.9rem;">进行全面测试，修复发现的问题，优化产品性能。</p>
                    </div>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.timeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
}

.timeline-item {
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.timeline-item h4 {
    margin-bottom: 10px;
}

.timeline-date {
    color: #666;
    margin-bottom: 10px;
}

.timeline-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

.timeline-marker {
    width: 20px;
    height: 20px;
    background: #4361ee;
    border-radius: 50%;
}

/* 连接线效果 */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #e9ecef;
    transform: translateX(-50%);
    z-index: -1;
}

@media (max-width: 768px) {
    .timeline {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .timeline-marker {
        display: none;
    }
    
    .timeline::before {
        display: none;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <!-- 示例20: 复杂网格嵌套布局 -->
        <div class="demo-section">
            <h2 class="demo-title">20. 复杂网格嵌套布局</h2>
            <p class="demo-description">展示Grid嵌套使用的能力，创建复杂的多级网格布局结构。</p>
            
            <div class="demo-container">
                <div style="display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto 1fr auto; height: 350px; gap: 15px;">
                    <header style="grid-column: 1 / span 3; background: var(--primary); color: white; padding: 15px; border-radius: 8px; text-align: center;">页面头部</header>
                    
                    <aside style="background: var(--secondary); color: white; padding: 15px; border-radius: 8px;">
                        <h4 style="margin-bottom: 15px;">左侧边栏</h4>
                        <ul style="list-style: none;">
                            <li style="padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">菜单项 1</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">菜单项 2</li>
                            <li style="padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">菜单项 3</li>
                        </ul>
                    </aside>
                    
                    <main style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 15px; padding: 15px; background: var(--light); border-radius: 8px;">
                        <div style="grid-column: 1 / span 2; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                            <h4 style="margin-bottom: 10px;">主要内容标题</h4>
                            <p style="color: #666;">这是主要内容区域的介绍文本。</p>
                        </div>
                        <div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                            <h5 style="margin-bottom: 10px;">子内容 1</h5>
                            <p style="color: #666; font-size: 0.9rem;">子内容区域的描述文本。</p>
                        </div>
                        <div style="background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                            <h5 style="margin-bottom: 10px;">子内容 2</h5>
                            <p style="color: #666; font-size: 0.9rem;">子内容区域的描述文本。</p>
                        </div>
                    </main>
                    
                    <aside style="background: var(--a***ent); color: white; padding: 15px; border-radius: 8px;">
                        <h4 style="margin-bottom: 15px;">右侧边栏</h4>
                        <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px; margin-bottom: 10px;">
                            <p style="font-size: 0.9rem;">侧边栏小部件 1</p>
                        </div>
                        <div style="background: rgba(255,255,255,0.1); padding: 10px; border-radius: 5px;">
                            <p style="font-size: 0.9rem;">侧边栏小部件 2</p>
                        </div>
                    </aside>
                    
                    <footer style="grid-column: 1 / span 3; background: var(--dark); color: white; padding: 15px; border-radius: 8px; text-align: center;">页面底部</footer>
                </div>
            </div>
            
            <div class="code-container">
                <div class="code-header">
                    <span>CSS代码</span>
                    <button class="copy-btn" onclick="copyCode(this)">复制代码</button>
                </div>
                <div class="code-content">
                    <pre><code class="language-css">.***plex-nested {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    gap: 15px;
}

.***plex-header {
    grid-column: 1 / span 3;
    background: #4361ee;
    color: white;
    padding: 15px;
    text-align: center;
}

.***plex-sidebar {
    background: #3a0ca3;
    color: white;
    padding: 15px;
}

.***plex-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
}

.main-title {
    grid-column: 1 / span 2;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.sub-content {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.***plex-footer {
    grid-column: 1 / span 3;
    background: #212529;
    color: white;
    padding: 15px;
    text-align: center;
}

@media (max-width: 768px) {
    .***plex-nested {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
    
    .***plex-header, .***plex-footer {
        grid-column: 1;
    }
    
    .***plex-main {
        grid-template-columns: 1fr;
    }
    
    .main-title {
        grid-column: 1;
    }
}</code></pre>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 CSS3 Grid网格响应布局示例 | 使用纯CSS3实现，无第三方框架</p>
        </footer>
    </div>

    <script>
        // 复制代码功能
        function copyCode(button) {
            const codeContainer = button.closest('.code-container');
            const codeElement = codeContainer.querySelector('code');
            const textArea = document.createElement('textarea');
            textArea.value = codeElement.textContent;
            document.body.appendChild(textArea);
            textArea.select();
            document.exec***mand('copy');
            document.body.removeChild(textArea);
            
            // 显示复制成功反馈
            const originalText = button.textContent;
            button.textContent = '已复制!';
            setTimeout(() => {
                button.textContent = originalText;
            }, 2000);
        }
        
        // 初始化Prism高亮
        document.addEventListener('DOMContentLoaded', () => {
            Prism.highlightAll();
            const tocList = document.getElementById("toc-list");
            document.querySelectorAll("h2").forEach((e,index) => {
                const id = "demo-" + (index + 1);
                e.setAttribute("id",id);
                const link = document.createElement("a");
                link.href = "#" + id;
                link.textContent = e.textContent;
                link.classList.add("toc-link");
                tocList.appendChild(link);

            })
        });
    </script>
</body>
</html>

响应式设计技巧

  1. 使用auto-fill和auto-fit - 自动调整列数适应容器
  2. 结合minmax()函数 - 设置灵活的尺寸范围
  3. 利用媒体查询 - 在不同断点调整网格结构
  4. 使用命名区域 - 提高代码可读性和维护性
  5. 注意浏览器支持 - 为旧版浏览器提供降级方案

浏览器兼容性

CSS Grid在现代浏览器中有很好的支持：

  • Chrome 57+
  • Firefox 52+
  • Safari 10.1+
  • Edge 16+
  • Opera 44+

对于需要支持旧版浏览器的情况，可以使用特性检测和渐进增强策略。

性能考虑

  1. 避免过度嵌套 - 复杂的网格结构可能影响性能
  2. 合理使用显式和隐式网格 - 根据内容需求选择
  3. 注意重复渲染 - 动态内容更新时的性能优化

总结

CSS Grid布局为Web开发带来了革命性的变化，它解决了传统布局中的许多难题。通过掌握这20个实用示例，您将能够：

  1. 创建各种复杂的网页布局
  2. 实现真正的响应式设计
  3. 提高开发效率和代码质量
  4. 创建更美观、更专业的用户界面

Grid布局的学习曲线相对平缓，一旦掌握核心概念，您将发现它比传统布局方法更直观、更强大。建议在实际项目中多加练习，逐步掌握Grid布局的精髓。

转载请说明出处内容投诉
CSS教程网 » 20个CSS3 Grid网格响应布局实战详解(附源码)
Dx

Dx

分享到：

发表评论

欢迎 访客 发表评论

一个令你着迷的主题！

查看演示 官网购买