CSS响应式布局卡片

实现的效果截图

可以直接复制代码，在浏览器中打开。
响应式卡片网格布局

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

使用CSS Grid的auto-fit和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>
    <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>
功能说明

响应式布局 ：使用CSS Grid的auto-fill和minmax()函数，卡片会根据容器宽度自动调整每行显示的数量。
交互控制：
- 窄容器：每行显示1-2张卡片
- 中等容器：每行显示2-3张卡片
- 宽容器：每行显示3-4张卡片
- 全宽容器：每行显示4张或更多卡片
视觉效果：
- 卡片悬停效果
- 平滑的布局过渡
- 美观的阴影和颜色设计
移动端适配：
- 在小屏幕上自动调整为单列布局
- 触摸友好的按钮大小
这个实现展示了如何使用CSS Grid创建灵活、响应式的卡片布局，无需媒体查询即可适应不同宽度的容器。