在css中如何用grid创建卡片布局-css教程-PHP中文网

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

P粉602998670

发布： 2025-10-06 16:26:02

原创

268人浏览过

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

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

使用 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，容器会根据空间自动换行排列。

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

卡片样式建议

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

.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  <font color="#666">/* 可添加: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()) 这个组合，大多数卡片布局都能轻松应对。

以上就是在css中如何用grid创建卡片布局的详细内容，更多请关注php中文网其它相关文章！