在css中如何用grid创建卡片布局

使用CSS Grid可轻松创建响应式卡片布局。通过设置display: grid、grid-template-columns配合auto-fit和minmax(250px, 1fr)，实现容器自动换行排列，gap定义间距，每列等宽且最小250px；结合.card样式统一外观，如背景、圆角、阴影等，提升视觉一致性。

使用 CSS Grid 创建卡片布局非常直观且灵活。只需要几行代码，就能实现响应式的多列卡片排列。

基本的 Grid 卡片容器设置

给父容器设置 display: grid，并定义列数和间距即可。

常用属性：

• grid-template-columns：定义每列的宽度
• gap：设置卡片之间的间距
• grid-auto-rows（可选）：统一行高

示例代码：

.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
gap: 20px;
}

响应式自适应列数

为了让卡片在不同屏幕下自动调整列数，可以用 minmax() 配合 auto-fit 或 auto-fill。

立即学习“前端免费学习笔记（深入）”；

.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

说明：每张卡片最小 250px，最大 1fr，容器会根据空间自动换行排列。

卡片样式建议

每个卡片可以设置一致的外观和内边距，提升视觉整齐度。

.card {
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
<font>/* 可添加:hover效果等</font>
}

完整简单示例

HTML 结构：

<div class="card-container">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
</div>

CSS 样式：

.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}
<p>.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
}

基本上就这些，不复杂但容易忽略细节。只要掌握 repeat(auto-fit, minmax()) 这个组合，大多数卡片布局都能轻松应对。