第2章：自适应卡片网格

自适应卡片网格布局技巧

@大迁世界

于 2025-08-30 19:08:47 发布

阅读量320

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq449245884/article/details/151039026

无需媒体查询的智能网格布局，适用于图片画廊、产品列表、作品集

📋 章节概述

自适应卡片网格是现代Web开发中最优雅的布局解决方案之一。它利用CSS Grid的auto-fit和minmax()函数，能够根据容器宽度自动调整卡片数量和大小，无需编写复杂的媒体查询。这种布局特别适合展示产品、图片画廊、博客文章等内容。

🎯 学习目标

通过本章学习，你将掌握：

CSS Grid的auto-fit和auto-fill的区别
minmax()函数的灵活运用
无媒体查询响应式设计的实现
卡片间距和对齐的最佳实践
不同内容类型的网格适配技巧

💻 核心代码实现

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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>自适应卡片网格</h1>
        <p class="intro">这个网格会根据屏幕宽度自动调整卡片数量，无需媒体查询</p>
        
        <div class="card-grid">
            <div class="card">
                <img src="https://picsum.photos/300/200?random=1" alt="示例图片1">
                <div class="card-content">
                    <h3>产品标题 1</h3>
                    <p>这是产品的简短描述，展示了卡片布局的灵活性。</p>
                    <div class="card-footer">
                        <span class="price">¥299</span>
                        <button class="btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <img src="https://picsum.photos/300/200?random=2" alt="示例图片2">
                <div class="card-content">
                    <h3>产品标题 2</h3>
                    <p>自适应网格让内容展示更加灵活和美观。</p>
                    <div class="card-footer">
                        <span class="price">¥399</span>
                        <button class="btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <img src="https://picsum.photos/300/200?random=3" alt="示例图片3">
                <div class="card-content">
                    <h3>产品标题 3</h3>
                    <p>无需复杂的媒体查询，就能实现完美的响应式效果。</p>
                    <div class="card-footer">
                        <span class="price">¥199</span>
                        <button class="btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <img src="https://picsum.photos/300/200?random=4" alt="示例图片4">
                <div class="card-content">
                    <h3>产品标题 4</h3>
                    <p>CSS Grid的强大功能让布局变得简单而优雅。</p>
                    <div class="card-footer">
                        <span class="price">¥499</span>
                        <button class="btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <img src="https://picsum.photos/300/200?random=5" alt="示例图片5">
                <div class="card-content">
                    <h3>产品标题 5</h3>
                    <p>适用于各种屏幕尺寸，从手机到桌面都完美适配。</p>
                    <div class="card-footer">
                        <span class="price">¥599</span>
                        <button class="btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <div class="card">
                <img src="https://picsum.photos/300/200?random=6" alt="示例图片6">
                <div class="card-content">
                    <h3>产品标题 6</h3>
                    <p>现代Web开发的最佳实践，简洁而强大。</p>
                    <div class="card-footer">
                        <span class="price">¥699</span>
                        <button class="btn">查看详情</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS样式

/* 基础重置和变量 */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;