CSS Grid 布局-代码号

CSS Grid 布局指南：构建现代响应式网页布局

Grid 布局概述

CSS Grid 布局是现代网页设计中的革命性技术，它提供了真正的二维布局能力。与传统的布局方法相比，Grid 布局让开发者能够轻松创建复杂且响应式的网页结构，无需依赖繁琐的浮动或定位技巧。

Grid 基础概念

Grid 容器与 Grid 项目

Grid 布局基于两个核心概念：Grid 容器（父元素）和 Grid 项目（子元素）。通过将元素设置为 Grid 容器，可以对其子元素进行精确的网格化布局控制。

.grid-container {
  display: grid;
}

网格线与轨道

网格线构成了网格的结构框架，而轨道则是相邻网格线之间的空间，可以是行或列。通过 grid-template-columns 和 grid-template-rows 属性定义网格结构。

基础网格布局示例

示例1：创建基础网格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础网格布局 - 代码号编程示例</title>
    <style>
        .code-grid-container {
            display: grid;
            grid-template-columns: repeat(3, 120px);
            grid-template-rows: repeat(2, 100px);
            gap: 15px;
            padding: 20px;
            background-color: #f5f7fa;
            border-radius: 8px;
        }

        .code-grid-item {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-weight: 500;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>

    <div class="code-grid-container">
        <div class="code-grid-item">项目 1</div>
        <div class="code-grid-item">项目 2</div>
        <div class="code-grid-item">项目 3</div>
        <div class="code-grid-item">项目 4</div>
        <div class="code-grid-item">项目 5</div>
        <div class="code-grid-item">项目 6</div>
    </div>

</body>
</html>

示例2：网格项目定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格项目定位 - 代码号学习示例</title>
    <style>
        .positioning-grid {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px 200px 100px;
            gap: 12px;
            padding: 25px;
            background-color: #ecf0f1;
            border-radius: 10px;
        }

        .grid-cell {
            padding: 20px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .featured-item {
            grid-column: 2 / 3;
            grid-row: 1 / 3;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        }

        .cell-1 { background: #3498db; }
        .cell-2 { background: #2ecc71; }
        .cell-3 { background: #9b59b6; }
        .cell-4 { background: #e67e22; }
        .cell-5 { background: #34495e; }
    </style>
</head>
<body>

    <div class="positioning-grid">
        <div class="grid-cell featured-item">
            主要内容区域
        </div>
        <div class="grid-cell cell-1">区块 1</div>
        <div class="grid-cell cell-2">区块 2</div>
        <div class="grid-cell cell-3">区块 3</div>
        <div class="grid-cell cell-4">区块 4</div>
        <div class="grid-cell cell-5">区块 5</div>
    </div>

</body>
</html>

高级网格技术

网格模板区域

Grid 模板区域提供了直观的布局定义方式，通过命名区域来创建复杂的布局结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网格模板区域 - 代码号实战示例</title>
    <style>
        .website-layout {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-template-rows: 80px 1fr 100px;
            grid-template-areas: 
                "header header"
                "sidebar content"
                "footer footer";
            gap: 0;
            min-height: 100vh;
        }

        .header {
            grid-area: header;
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
        }

        .sidebar {
            grid-area: sidebar;
            background: #34495e;
            color: white;
            padding: 25px;
        }

        .content {
            grid-area: content;
            background: #ecf0f1;
            padding: 30px;
        }

        .footer {
            grid-area: footer;
            background: #2c3e50;
            color: white;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <div class="website-layout">
        <header class="header">
            <div class="logo">代码号学习平台</div>
        </header>
        
        <aside class="sidebar">
            <h3>导航菜单</h3>
            <ul>
                <li>前端开发</li>
                <li>JavaScript</li>
                <li>CSS教程</li>
                <li>项目实战</li>
            </ul>
        </aside>
        
        <main class="content">
            <h2>CSS Grid 布局教程</h2>
            <p>学习如何使用CSS Grid创建现代化的网页布局，掌握响应式设计技巧。</p>
        </main>
        
        <footer class="footer">
            <p>&copy; 2023 代码号编程学习社区</p>
        </footer>
    </div>

</body>
</html>

间距控制与响应式设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式网格 - 代码号编程实践</title>
    <style>
        .responsive-grid {
            display: grid;
            gap: 20px;
            padding: 25px;
            background: #f8f9fa;
        }

        /* 移动端布局 */
        @media (max-width: 768px) {
            .responsive-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }

        /* 平板端布局 */
        @media (min-width: 769px) and (max-width: 1024px) {
            .responsive-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 18px;
            }
        }

        /* 桌面端布局 */
        @media (min-width: 1025px) {
            .responsive-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
        }

        .grid-card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .grid-card:hover {
            transform: translateY(-5px);
        }

        .card-title {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .card-content {
            color: #7f8c8d;
            line-height: 1.6;
        }
    </style>
</head>
<body>

    <div class="responsive-grid">
        <div class="grid-card">
            <h3 class="card-title">HTML5 基础教程</h3>
            <p class="card-content">学习现代HTML5语义化标签和API特性，构建结构化网页内容。</p>
        </div>
        
        <div class="grid-card">
            <h3 class="card-title">CSS3 高级技巧</h3>
            <p class="card-content">掌握CSS3动画、过渡和变换效果，创建视觉吸引力强的用户界面。</p>
        </div>
        
        <div class="grid-card">
            <h3 class="card-title">JavaScript 编程</h3>
            <p class="card-content">从基础语法到高级概念，详细学习JavaScript编程技术。</p>
        </div>
        
        <div class="grid-card">
            <h3 class="card-title">响应式设计</h3>
            <p class="card-content">学习使用媒体查询和弹性布局创建适配多设备的网页设计。</p>
        </div>
        
        <div class="grid-card">
            <h3 class="card-title">前端框架</h3>
            <p class="card-content">探索React、Vue等现代前端框架的开发实践和应用技巧。</p>
        </div>
        
        <div class="grid-card">
            <h3 class="card-title">项目实战</h3>
            <p class="card-content">通过实际项目练习，巩固前端开发技能和项目管理能力。</p>
        </div>
    </div>

</body>
</html>

实际应用场景

电商产品网格布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商产品网格 - 代码号商城示例</title>
    <style>
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            padding: 30px;
            background: #fff;
        }

        .product-card {
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

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

        .product-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .product-info {
            padding: 20px;
        }

        .product-title {
            font-size: 16px;
            color: #2d3436;
            margin-bottom: 10px;
        }

        .product-price {
            font-size: 20px;
            color: #e17055;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .add-to-cart {
            background: #00b894;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            font-weight: 600;
        }

        .add-to-cart:hover {
            background: #00a085;
        }
    </style>
</head>
<body>

    <div class="product-grid">
        <div class="product-card">
            <div class="product-image">产品图片 1</div>
            <div class="product-info">
                <h3 class="product-title">高级编程教程 - HTML/CSS</h3>
                <div class="product-price">¥129.00</div>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
        
        <div class="product-card">
            <div class="product-image">产品图片 2</div>
            <div class="product-info">
                <h3 class="product-title">JavaScript 实战指南</h3>
                <div class="product-price">¥149.00</div>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
        
        <div class="product-card">
            <div class="product-image">产品图片 3</div>
            <div class="product-info">
                <h3 class="product-title">React 开发手册</h3>
                <div class="product-price">¥179.00</div>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
        
        <div class="product-card">
            <div class="product-image">产品图片 4</div>
            <div class="product-info">
                <h3 class="product-title">Vue.js 项目实战</h3>
                <div class="product-price">¥159.00</div>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
    </div>

</body>
</html>

仪表板界面设计

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析仪表板 - 代码号示例</title>
    <style>
        .dashboard {
            display: grid;
            grid-template-columns: 300px 1fr;
            grid-template-rows: 70px 1fr;
            grid-template-areas: 
                "sidebar header"
                "sidebar main";
            min-height: 100vh;
            background: #f8f9fa;
        }

        .header {
            grid-area: header;
            background: white;
            padding: 0 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .sidebar {
            grid-area: sidebar;
            background: #2c3e50;
            color: white;
            padding: 25px;
        }

        .main {
            grid-area: main;
            padding: 30px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #2c3e50;
            margin: 10px 0;
        }

        .stat-label {
            color: #7f8c8d;
            font-size: 14px;
        }

        .logo {
            font-size: 22px;
            font-weight: bold;
            color: #3498db;
        }

        .nav-item {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            cursor: pointer;
        }

        .nav-item:hover {
            color: #3498db;
        }
    </style>
</head>
<body>

    <div class="dashboard">
        <header class="header">
            <div class="logo">代码号分析平台</div>
            <div>用户控制台</div>
        </header>
        
        <aside class="sidebar">
            <h3>数据分析菜单</h3>
            <div class="nav-item">学习进度</div>
            <div class="nav-item">课程统计</div>
            <div class="nav-item">成绩分析</div>
            <div class="nav-item">项目完成情况</div>
        </aside>
        
        <main class="main">
            <div class="stat-card">
                <div class="stat-label">已完成课程</div>
                <div class="stat-value">24</div>
                <div>总计30门课程</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-label">编程练习</div>
                <div class="stat-value">156</div>
                <div>本周完成12个</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-label">学习时长</div>
                <div class="stat-value">48h</div>
                <div>本月总计</div>
            </div>
            
            <div class="stat-card">
                <div class="stat-label">项目完成</div>
                <div class="stat-value">8</div>
                <div>实战项目数量</div>
            </div>
        </main>
    </div>

</body>
</html>

本节课程知识要点

Grid 布局基础：理解容器与项目的概念，掌握基本的网格创建方法
轨道定义：使用 grid-template-columns 和 grid-template-rows 定义网格结构
项目定位：通过 grid-column 和 grid-row 控制项目在网格中的位置
模板区域：使用命名区域创建直观的布局结构
响应式设计：结合媒体查询实现自适应网格布局
间距控制：使用 gap 属性管理网格项目间的距离
实用技巧：
- 使用 fr 单位创建弹性网格轨道
- 利用 repeat() 函数简化网格定义
- 使用 auto-fit 和 auto-fill 创建响应式网格
- 结合 Flexbox 进行复杂布局设计
浏览器支持：现代浏览器均支持 Grid 布局，但在生产环境中仍需考虑兼容性策略

本文标签：

CSS Grid 布局