使用CSS Grid实现响应式卡片布局，通过display: grid、grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))和gap属性创建自适应网格，配合媒体查询优化不同屏幕体验，每张卡片包含图片、标题和描述，支持悬停效果与圆角阴影，适配手机、平板和桌面设备，结构清晰且易于维护。
要实现一个响应式的HTML卡片网格布局，使用CSS Grid是最简洁高效的方式。下面是一个完整的实现方案，适配手机、平板和桌面设备。
基本HTML结构
每个卡片包含图片、标题和简短描述，放入容器.card-grid中：
CSS Grid网格布局设置
使用display: grid定义网格容器，通过gap控制间距，grid-template-columns配合minmax()和auto-fit实现自适应列数。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1400px;
margin: 0 auto;
}
- auto-fit：自动填充可用空间
- minmax(280px, 1fr)：每列最小280px，最大占据等分空间
- 屏幕变窄时自动减少列数，小屏下变为单列
卡片样式美化
为卡片添加边框、圆角、阴影和悬停效果，提升视觉体验：
.card {
border: 1px solid #ddd;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}
.card img {
width: 100%;
height: 180px;
object-fit: cover;
}
.card h3 {
font-size: 1.2em;
margin: 16px;
color: #333;
}
.card p {
color: #666;
margin: 0 16px 16px;
line-height: 1.5;
}
响应式断点微调（可选）
在大屏幕上希望限制最大列宽或调整间距，可以添加媒体查询：
@media (max-width: 768px) {
.card-grid {
padding: 15px;
gap: 16px;
}
.card h3 {
font-size: 1.1em;
}
}
@media (max-width: 480px) {
.card-grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
基本上就这些。这种基于CSS Grid的卡片布局无需额外框架，兼容现代浏览器，结构清晰且维护简单，适合博客、产品展示或图库类页面。关键在于auto-fit与minmax的组合使用，让网格真正“响应”不同屏幕尺寸。
