CSS Grid实现工作流卡片每行四个自适应三端

在开发工作流列表页时，遇到卡片变形和列数不正确的问题。本文使用CSS Grid网格布局，通过定义响应式列模板，实现PC端每行四列、平板两到三列、手机单列的自适应效果，同时优化卡片内部结构和交互，确保三端显示一致。

核心问题

如何用CSS让工作流列表页面每行显示四个卡片，并适配PC、平板、手机三端？

问题背景

在项目开发中，工作流列表页面的卡片布局出现了变形，原本应该每行显示四个卡片的网格，实际显示异常。同时需要页面能够自适应 PC、平板、手机三端，在不同屏幕下自动调整列数和样式。

解决方案：CSS Grid 实现响应式网格

核心思路是使用 CSS Grid 网格布局，结合媒体查询，为不同的屏幕尺寸定义不同的列数。

定义网格容器

首先，将工作流列表的容器设置为 Grid 布局，并通过 grid-template-columns 属性控制列数和列宽。

.workflow_list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr); /* 默认四列 */
}

repeat(4, 1fr) 表示创建四列，每列宽度平均分配剩余空间。gap 设置卡片之间的间距。

根据断点调整列数

使用媒体查询，针对不同屏幕尺寸重新定义列数：

/* 平板横屏：三列 */
@media (max-width: 1199px) and (min-width: 992px) {
  .workflow_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 平板竖屏：两列 */
@media (max-width: 991px) and (min-width: 768px) {
  .workflow_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 手机端：单列 */
@media (max-width: 767px) {
  .workflow_list {
    grid-template-columns: 1fr;
  }
}

这样，在 PC 端（≥1200px）保持四列；平板横屏时变为三列，竖屏时两列；手机屏幕宽度不足 768px 时自动切换为单列布局。

卡片内部结构优化

除了列数控制，卡片自身的变形往往源于内容区域没有良好地适配。原有的 .workflow_card 样式可能缺乏对内部结构的约束。

使用 Flexbox 实现垂直分布

将卡片设置为 Flex 容器，方向为列，使 header、body、footer 区域能够自上而下排列，且 footer 始终固定在底部。

.workflow_card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.workflow_card .card-body {
  flex: 1; /* 占据剩余空间，保证 footer 在底部 */
}

保持图片比例

为避免卡片中的缩略图拉伸或压缩，常用 padding-top 百分比技巧维持宽高比，如 16:9 或 4:3。这里采用 padding-top: 60%（即 5:3）。

.workflow_card .card-image {
  position: relative;
  width: 100%;
  padding-top: 60%;
  overflow: hidden;
}

.workflow_card .card-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

响应式细节调整

不同设备下，字体大小、间距、内边距等也需要进行适配，提升可读性和操作体验。

字体与间距适配

在媒体查询中调整卡片的标题、文字大小和内外边距。例如：

/* 平板端适当减小间距 */
@media (max-width: 1199px) and (min-width: 768px) {
  .workflow_list {
    gap: 15px;
  }
  .workflow_card .card-title {
    font-size: 16px;
  }
}

/* 手机端进一步缩小 */
@media (max-width: 767px) {
  .workflow_list {
    gap: 10px;
  }
  .workflow_card {
    margin-bottom: 15px;
  }
  .workflow_card .card-title {
    font-size: 15px;
  }
}

移动端特殊处理

在手机布局中，有时需要取消某些元素的固定定位，例如侧边栏的 position: sticky，以避免遮挡内容或滚动异常。

@media (max-width: 767px) {
  .sidebar {
    position: static;
  }
}

交互效果保留

为了不损失 PC 端的用户体验，悬停效果继续生效，但需注意在移动端没有 hover，可以使用 @media (hover: hover) 或直接在 PC 媒体查询内定义。

@media (min-width: 1200px) {
  .workflow_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  .workflow_card:hover .card-title {
    color: #1890ff;
  }
  .workflow_card:hover .card-image img {
    transform: scale(1.05);
  }
  .card-image img {
    transition: transform 0.3s ease;
  }
}

最终效果

通过上述调整，工作流列表页面实现了：
- PC 端（≥1200px）：每行 4 个卡片
- 平板横屏（992px - 1199px）：每行 3 个卡片
- 平板竖屏（768px - 991px）：每行 2 个卡片
- 手机端（<768px）：每行 1 个卡片

卡片内部结构稳定，图片比例统一，文字和间距随屏幕宽度自适应，且保留了良好的交互反馈。

总结

CSS Grid 是处理二维布局的强大工具，结合媒体查询可以轻松实现卡片列表的响应式适配。关键点在于：
1. 使用 grid-template-columns 配合 repeat() 和 fr 单位控制列数。
2. 通过断点重新定义列数，实现不同设备的匹配。
3. 卡片内部用 Flexbox 垂直布局，保证内容自然伸展。
4. 细节样式（字体、间距）在响应式范围内同步调整。

这种模式可以快速应用于任何需要网格展示的列表页，提高开发效率和用户体验。

欢迎来到圆圈网