在css中如何制作网格布局卡片效果-css教程-PHP中文网

在css中如何制作网格布局卡片效果

P粉602998670

发布： 2025-10-19 21:22:01

原创

665人浏览过

答案：使用CSS Grid创建响应式卡片布局，通过display: grid和repeat(auto-fit, minmax(250px, 1fr))定义自适应列，结合gap设置间距，利用border-radius、box-shadow和transform实现卡片样式与悬停效果，HTML结构清晰，配合object-fit: cover确保图片比例，整体布局美观且适配多屏。

在css中如何制作网格布局卡片效果

使用CSS制作网格布局的卡片效果，核心是结合 Grid 布局 和卡片样式的结构设计。下面是一个简单实用的方法，帮助你快速实现响应式网格卡片布局。

1. 使用 CSS Grid 设置网格容器

将父容器设置为 grid 布局，定义列数、间距和自动行高。

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

登录后复制

说明：

repeat(auto-fit, minmax(250px, 1fr))：自动适配列数，每列最小 250px，最大 1fr（均分剩余空间）
gap：设置卡片之间的间距
在不同屏幕下能自动换行，实现响应式效果

2. 设计卡片样式

每个卡片使用 border、box-shadow 和圆角 增强视觉效果。

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

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

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
}
.card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.card-content {
  padding: 15px;
}
.card-content h3 {
  margin: 0 0 10px;
  font-size: 1.1em;
}
.card-content p {
  color: #666;
  font-size: 0.9em;
}

登录后复制

3. HTML 结构示例

配合简单的 HTML 结构即可展示效果。

<div class="card-grid">
  <div class="card">
    <img src="image1.jpg" alt="图片1">
    <div class="card-content">
      <h3>标题一</h3>
      <p>这里是卡片的简要描述内容。</p>
    </div>
  </div>
  <!-- 更多卡片 -->
</div>

登录后复制