如何用单一Grid或Flex实现卡片的多端响应式布局？

你完全不需要重复创建多套布局再隐藏，用Grid或Flex只需要一套HTML结构，配合media query调整布局规则就能实现三种视图的适配，下面是具体方案：

方案一：CSS Grid（适合规整网格布局） #

Grid天生适合处理网格类布局，只需要通过媒体查询修改列数即可实现不同断点的布局。

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;
  gap: 1.5rem; /* 卡片之间的间距，可按需调整 */
  padding: 1rem;
}

.card {
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 移动端（<768px）：单列布局 */
@media (max-width: 767px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

/* 平板（768px-1023px）：2列布局 */
@media (min-width: 768px) and (max-width: 1023px) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 桌面端（≥1024px）：3列布局（可根据需求调整列数） */
@media (min-width: 1024px) {
  .card-container {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto; /* 容器居中 */
  }
  /* 如果需要某张卡片占2列，给对应卡片加这个类 */
  .card-wide {
    grid-column: span 2;
  }
}

方案二：Flexbox（适合流式弹性布局） #

Flex适合更灵活的流式排列，通过调整卡片的弹性属性实现不同列数。

CSS代码（HTML结构和上面一致） #

/* 基础样式：通用布局规则 */
.card-container {
  display: flex;
  flex-wrap: wrap; /* 卡片自动换行 */
  gap: 1.5rem;
  padding: 1rem;
}

.card {
  flex: 1 1 100%; /* 默认占满容器宽度，移动端单列 */
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 平板：2列布局 */
@media (min-width: 768px) and (max-width: 1023px) {
  .card {
    /* 计算宽度：50%减去一半的gap，避免卡片因间距换行 */
    flex: 1 1 calc(50% - 0.75rem);
  }
}

/* 桌面端：3列布局 */
@media (min-width: 1024px) {
  .card-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .card {
    /* 计算宽度：1/3减去三分之二的gap */
    flex: 1 1 calc(33.333% - 1rem);
  }
}

选型建议 #

• 如果是规整的等宽网格布局，优先选Grid，代码更简洁直观。
• 如果需要卡片宽度灵活调整（比如不等宽、自适应内容），选Flex更合适。

内容的提问来源于stack exchange，提问作者Pawan