css常见布局实战_实现一个卡片式UI布局

用 display: grid 实现响应式卡片布局更优，通过 repeat(auto-fill, minmax(300px, 1fr))) 自适应列宽、gap 控制间距、object-fit: cover 统一图片裁切、margin-top: auto 固定底部按钮，并为 IE11 提供 inline-block 降级方案。

用 display: grid 快速搭出响应式卡片容器

卡片布局本质是二维排列，grid 比 flex 更适合控制行列对齐和间距。别一上来就写 flex-wrap，尤其当卡片高度不一致时，flex 容易出现错行。

关键点：

• grid-template-columns 用 repeat(auto-fill, minmax(300px, 1fr))) 实现等宽自适应，比媒体查询更轻量
• gap 控制卡片间距，比给每个卡片设 margin 更干净（避免首尾多出空白）
• 卡片自身用 display: flex; flex-direction: column 管理内部标题/内容/按钮的垂直流

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)));
  gap: 1.5rem;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

图片高度不一致？用 object-fit: cover 统一裁切

卡片里常嵌图片，但原始图比例各异，直接设固定高会导致拉伸或留白。别用 height: 100% + width: 100% 强拉。

正确做法：

• 给图片容器（如 ）设固定高，比如 height: 180px
• 图片本身用 object-fit: cover 和 object-position: center 居中裁切
• 避免用 background-image——语义弱、无法懒加载、SEO 不友好

.card-image {
  height: 180px;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

卡片底部按钮对齐失效？用 margin-top: auto 推下去

卡片内容长度不同，导致底部按钮位置浮动。别用绝对定位或 JS 计算高度。

利用 Flex 的自动外边距特性：

• 卡片内部用 flex-direction: column
• 给按钮加 margin-top: auto，它会把按钮“吸”到底部
• 如果按钮需要左右对齐，再套一层 display: flex; justify-content: flex-end

.card-content {
  padding: 1.25rem;
  flex: 1;
}
.card-actions {
  margin-top: auto;
  padding: 0.75rem 1.25rem;
}
.card-actions button {
  padding: 0.5rem 1rem;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 4px;
}

IE11 兼容不了 grid？降级用 inline-block + calc()

真要支持 IE11，grid 必须放弃。别硬上 -ms-grid，兼容性差且写法反直觉。

稳妥降级方案：

• 用 display: inline-block 替代 grid，配合 vertical-align: top 防止基线对齐错位
• 列宽用 calc(33.333% - 1rem)（减去左右 margin），注意 IE11 支持 calc 但不支持 gap
• 用 @supports not (display: grid) 包裹降级样式，现代浏览器优先走 grid

@su
pports not (display: grid) {
  .card-grid {
    font-size: 0; /* 消除 inline-block 间隙 */
  }
  .card {
    display: inline-block;
    vertical-align: top;
    width: calc(33.333% - 1rem);
    margin: 0 0.5rem 1rem;
  }
}

实际项目里最容易漏的是图片裁切后的焦点偏移——比如人物图被裁掉头部。上线前务必检查 object-position 值是否适配关键内容区域。