卡片式布局是网页设计中常用的内容呈现形式，每个内容单元以独立卡片的形态展示，边界清晰，信息聚焦，在电商商品列表、资讯列表、个人作品展示等场景中应用十分广泛。实现这种布局的核心是先通过HTML5的语义化标签搭建合理的页面结构，再借助CSS的布局能力完成卡片的排列与样式调整。
一、基础HTML5结构搭建
首先我们需要用HTML5的语义化标签来构建卡片式布局的基础骨架，整体结构分为容器和多个卡片单元，每个卡片单元内部包含图片、标题、描述等常见内容模块。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5卡片式布局示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="card-container">
<!-- 单个卡片单元 -->
<article class="card-item">
<img class="card-img" src="https://picsum.photos/300/200?random=2" alt="卡片图片">
<div class="card-content">
<h3 class="card-title">卡片标题一</h3>
<p class="card-desc">这是卡片的描述内容，用于展示核心信息，字数不宜过长，保持简洁清晰。</p>
<button class="card-btn">查看详情</button>
</div>
</article>
<article class="card-item">
<img class="card-img" src="https://picsum.photos/300/200?random=3" alt="卡片图片">
<div class="card-content">
<h3 class="card-title">卡片标题二</h3>
<p class="card-desc">这是卡片的描述内容，用于展示核心信息，字数不宜过长，保持简洁清晰。</p>
<button class="card-btn">查看详情</button>
</div>
</article>
<article class="card-item">
<img class="card-img" src="https://picsum.photos/300/200?random=4" alt="卡片图片">
<div class="card-content">
<h3 class="card-title">卡片标题三</h3>
<p class="card-desc">这是卡片的描述内容，用于展示核心信息，字数不宜过长，保持简洁清晰。</p>
<button class="card-btn">查看详情</button>
</div>
</article>
<article class="card-item">
<img class="card-img" src="https://picsum.photos/300/200?random=5" alt="卡片图片">
<div class="card-content">
<h3 class="card-title">卡片标题四</h3>
<p class="card-desc">这是卡片的描述内容，用于展示核心信息，字数不宜过长，保持简洁清晰。</p>
<button class="card-btn">查看详情</button>
</div>
</article>
</main>
</body>
</html>
这里使用了<main>标签作为卡片容器的外层语义化标签，每个卡片用<article>标签包裹，符合HTML5的语义化规范，有利于SEO和代码可读性。卡片内部的结构根据内容需求调整，常见的是图片、标题、描述、操作按钮的组合。
二、使用Flex布局实现卡片排列
Flex布局是实现卡片式布局的常用方案，兼容性好，配置灵活，适合大多数场景的卡片排列需求。
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
background-color: #f5f5f5;
font-family: "Microsoft YaHei", sans-serif;
}
/* 卡片容器样式 */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}
/* 单个卡片样式 */
.card-item {
width: calc(25% - 20px);
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 卡片悬停效果 */
.card-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* 卡片图片样式 */
.card-img {
width: 100%;
height: 180px;
object-fit: cover;
}
/* 卡片内容区域 */
.card-content {
padding: 16px;
}
.card-title {
font-size: 18px;
color: #333333;
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-desc {
font-size: 14px;
color: #666666;
line-height: 1.5;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-btn {
padding: 8px 16px;
background-color: #409eff;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.card-btn:hover {
background-color: #337ecc;
}
上面的代码中，给卡片容器设置display: flex开启flex布局，flex-wrap: wrap允许卡片换行，gap设置卡片之间的间距，justify-content: center让卡片整体居中排列。单个卡片的宽度通过calc计算，减去间距后实现每行展示4个卡片的效果。
三、使用Grid布局实现卡片排列
如果需要更精准的网格控制，Grid布局是更好的选择，能够直接定义行列的规则，适配不同屏幕时调整更方便。
/* 替换卡片容器的样式即可 */
.card-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
/* 单个卡片样式和之前flex方案的卡片样式保持一致 */
.card-item {
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 其余卡片内部样式和flex方案一致，无需修改 */
Grid布局通过grid-template-columns: repeat(4, 1fr)直接定义每行4列，每列等宽，gap设置行列间距，代码更简洁，不需要手动计算宽度，布局规则更清晰。
四、响应式适配处理
卡片式布局需要适配不同尺寸的屏幕，我们可以通过媒体查询调整不同屏幕下的卡片数量和样式。
/* 屏幕宽度小于992px时，每行展示3个卡片 */
@media screen and (max-width: 992px) {
.card-item {
width: calc(33.33% - 20px); /* flex方案适配 */
/* grid方案替换为 grid-template-columns: repeat(3, 1fr); */
}
}
/* 屏幕宽度小于768px时，每行展示2个卡片 */
@media screen and (max-width: 768px) {
.card-item {
width: calc(50% - 20px); /* flex方案适配 */
/* grid方案替换为 grid-template-columns: repeat(2, 1fr); */
}
}
/* 屏幕宽度小于480px时，每行展示1个卡片 */
@media screen and (max-width: 480px) {
.card-item {
width: 100%; /* flex方案适配 */
/* grid方案替换为 grid-template-columns: 1fr; */
}
}
通过媒体查询根据屏幕宽度调整卡片的宽度或者网格列数，就能实现卡片式布局在不同设备上的自适应展示，保证用户体验一致。
五、常见问题说明
- 卡片内部内容高度不一致时，flex布局下卡片高度会默认拉伸对齐，grid布局下默认也会拉伸，如果需要固定高度可以手动设置
card-item的height属性。 - 图片加载慢时会出现布局跳动，可以给
card-img设置固定的高度，配合object-fit: cover保证图片比例正常。 - 如果需要卡片之间有分割线而不是间距，可以将
gap替换为margin结合相邻兄弟选择器实现。