CSS响应式布局卡片

新晨4372025-10-31 14:23

实现的效果截图

可以直接复制代码，在浏览器中打开。

响应式卡片网格布局

我将创建一个使用CSS Grid实现的响应式卡片布局，当容器宽度变化时，卡片会自动调整每行显示的数量。

思路分析

  1. 使用CSS Grid的auto-fit和minmax()函数实现自适应布局
  2. 设置断点确保在不同屏幕尺寸下都有良好的显示效果
  3. 添加平滑的过渡效果提升用户体验
  4. 设计简洁美观的卡片样式

最终实现代码

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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #7f8c8d;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 30px 0;
            flex-wrap: wrap;
        }
        
        .control-btn {
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }
        
        .control-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            transition: all 0.3s ease;
        }
        
        .card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        
        .card-img {
            height: 180px;
            width: 100%;
            background-size: cover;
            background-position: center;
        }
        
        .card-content {
            padding: 20px;
        }
        
        .card-title {
            font-size: 1.4rem;
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .card-text {
            color: #7f8c8d;
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .card-tag {
            background: #ecf0f1;
            color: #34495e;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
        }
        
        .card-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }
        
        .card-btn:hover {
            background: #2980b9;
        }
        
        .info-panel {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-top: 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .info-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: #2c3e50;
        }
        
        .info-text {
            color: #7f8c8d;
            line-height: 1.6;
        }
        
        @media (max-width: 768px) {
            .card-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 20px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .card-grid {
                grid-template-columns: 1fr;
            }
            
            .controls {
                flex-direction: column;
                align-items: center;
            }
            
            .control-btn {
                width: 100%;
                max-width: 250px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>响应式卡片网格布局</h1>
            <p class="subtitle">使用CSS Grid实现的自适应卡片布局，当容器宽度变化时，卡片会自动调整每行显示数量</p>
        </header>
        
        <div class="controls">
            <button class="control-btn" onclick="adjustContainer('narrow')">窄容器</button>
            <button class="control-btn" onclick="adjustContainer('medium')">中等容器</button>
            <button class="control-btn" onclick="adjustContainer('wide')">宽容器</button>
            <button class="control-btn" onclick="adjustContainer('full')">全宽容器</button>
        </div>
        
        <div class="card-grid" id="cardGrid">
            <!-- 卡片1 -->
            <div class="card">
                <div class="card-img" style="background-color: #3498db;"></div>
                <div class="card-content">
                    <h3 class="card-title">响应式设计</h3>
                    <p class="card-text">使用CSS Grid的auto-fit和minmax()函数，实现根据容器宽度自动调整布局。</p>
                    <div class="card-footer">
                        <span class="card-tag">CSS</span>
                        <button class="card-btn">了解更多</button>
                    </div>
                </div>
            </div>
            
            <!-- 卡片2 -->
            <div class="card">
                <div class="card-img" style="background-color: #2ecc71;"></div>
                <div class="card-content">
                    <h3 class="card-title">现代布局技术</h3>
                    <p class="card-text">Grid布局提供了强大的二维布局能力，比传统布局方法更加灵活。</p>
                    <div class="card-footer">
                        <span class="card-tag">布局</span>
                        <button class="card-btn">了解更多</button>
                    </div>
                </div>
            </div>
            
            <!-- 卡片3 -->
            <div class="card">
                <div class="card-img" style="background-color: #e74c3c;"></div>
                <div class="card-content">
                    <h3 class="card-title">用户体验优化</h3>
                    <p class="card-text">平滑的过渡效果和响应式设计确保在各种设备上都有良好的体验。</p>
                    <div class="card-footer">
                        <span class="card-tag">UX</span>
                        <button class="card-btn">了解更多</button>
                    </div>
                </div>
            </div>
            
            <!-- 卡片4 -->
            <div class="card">
                <div class="card-img" style="background-color: #f39c12;"></div>
                <div class="card-content">
                    <h3 class="card-title">移动优先设计</h3>
                    <p class="card-text">采用移动优先的设计策略，确保在小屏幕设备上也有出色的表现。</p>
                    <div class="card-footer">
                        <span class="card-tag">移动端</span>
                        <button class="card-btn">了解更多</button>
                    </div>
                </div>
            </div>
            
            <!-- 卡片5 -->
            <div class="card">
                <div class="card-img" style="background-color: #9b59b6;"></div>
                <div class="card-content">
                    <h3 class="card-title">CSS变量应用</h3>
                    <p class="card-text">使用CSS变量使代码更加模块化，便于维护和主题切换。</p>
                    <div class="card-footer">
                        <span class="card-tag">CSS变量</span>
                        <button class="card-btn">了解更多</button>
                    </div>
                </div>
            </div>
            
            <!-- 卡片6 -->
            <div class="card">
                <div class="card-img" style="background-color: #1abc9c;"></div>
                <div class="card-content">
                    <h3 class="card-title">无障碍访问</h3>
                    <p class="card-text">遵循无障碍设计原则，确保所有用户都能方便地使用网站。</p>
                    <div class="card-footer">
                        <span class="card-tag">可访问性</span>
                        <button class="card-btn">了解更多</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="info-panel">
            <h3 class="info-title">实现原理</h3>
            <p class="info-text">
                这个布局使用了CSS Grid的<code>grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));</code>属性。
                当容器宽度变化时，Grid会自动计算可以容纳的卡片数量，并相应地调整布局。
                在窄屏幕上，每行显示较少的卡片；在宽屏幕上，每行显示更多的卡片。
            </p>
        </div>
    </div>

    <script>
        function adjustContainer(size) {
            const container = document.querySelector('.container');
            const cardGrid = document.getElementById('cardGrid');
            
            // 移除之前可能存在的类
            container.classList.remove('narrow', 'medium', 'wide', 'full');
            
            // 根据选择添加相应的类
            if (size === 'narrow') {
                container.classList.add('narrow');
                container.style.maxWidth = '600px';
            } else if (size === 'medium') {
                container.classList.add('medium');
                container.style.maxWidth = '800px';
            } else if (size === 'wide') {
                container.classList.add('wide');
                container.style.maxWidth = '1000px';
            } else if (size === 'full') {
                container.classList.add('full');
                container.style.maxWidth = '1200px';
            }
        }
    </script>
</body>
</html>

功能说明

  1. 响应式布局 ：使用CSS Grid的auto-fill和minmax()函数，卡片会根据容器宽度自动调整每行显示的数量。

  2. 交互控制：

    • 窄容器：每行显示1-2张卡片
    • 中等容器：每行显示2-3张卡片
    • 宽容器：每行显示3-4张卡片
    • 全宽容器：每行显示4张或更多卡片

  3. 视觉效果：

    • 卡片悬停效果
    • 平滑的布局过渡
    • 美观的阴影和颜色设计

  4. 移动端适配：

    • 在小屏幕上自动调整为单列布局
    • 触摸友好的按钮大小

这个实现展示了如何使用CSS Grid创建灵活、响应式的卡片布局，无需媒体查询即可适应不同宽度的容器。

相关推荐
上车函予6 小时前
点击即扩散：使用 View Transition API 实现 UnoCSS 官网同款主题切换动画
前端·javascript·css
charlie1145141916 小时前
从模仿到掌握：尝试一下Native CSS手写一个好看的按钮
前端·css·学习·ui
时间的情敌6 小时前
Vue3+CSS 实现3D卡片动画
前端·css·3d
小九今天不码代码6 小时前
CSS技巧：使用 box-shadow + outline 实现多重边框与圆角阴影完美结合
css·outline·box-shadow·多重边框·圆角边框·前端视觉效果·css3技巧
辣辣y7 小时前
Tailwind CSS 使用指南
前端·css
前端Hardy10 小时前
HTML&CSS&JS：抖音爆火的满屏“关心弹幕”酷炫卡片，已经帮你打包好了，快来体验吧！
前端·javascript·css
Zyx200710 小时前
用 CSS 演绎浪漫：从零构建“亲吻动画”全流程解析
前端·css
meichaoWen1 天前
【CSS】CSS 面试知多少
前端·css
Nobody_Cares1 天前
CSS尺寸、盒子模型、定位、浮动与布局（Flex/Grid）
css
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）