CSS Grid两列布局：移动端标题与描述紧凑堆叠实现咨询

嘿，这个需求完全可以用Grid实现，而且是很合适的方案！不过你当前的结构有个小问题——你把每个标题和描述都作为独立的Grid项，所以它们之间的间距都是grid-gap:32px，这就导致移动端标题和描述的间距和组与组之间一样大了。咱们调整一下结构和样式就能完美解决：

核心思路 #

把每组（标题+描述）打包成一个单独的Grid容器项，这样grid-gap只会作用在组与组之间，而组内的标题和描述间距可以单独设置成你想要的小尺寸，完全满足移动端的堆叠需求。

修改后的完整代码 #

CSS部分 #

/* 基础Grid布局：控制组与组之间的间距 */
.cards {
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-gap: 32px; /* 这个间距只作用在组与组之间 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 每组的容器：控制组内元素的布局 */
.cardGroup {
  display: flex;
  flex-direction: column; /* 默认移动端垂直堆叠 */
}

/* 卡片基础样式 */
.card {
  padding: 1rem;
  height: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cardTitle {
  color: red;
  font-size: 32px;
  text-align: center;
  margin-bottom: 0.5rem; /* 移动端标题和描述的小间距 */
}

.cardDescription {
  font-size: 18px;
  text-align: center;
}

/* 桌面端调整 */
@media (min-width: 768px) {
  .cardGroup {
    flex-direction: row; /* 桌面端标题和描述横向排列 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 标题右，描述左，中间留白 */
  }
  
  .cardTitle {
    text-align: right;
    margin-bottom: 0; /* 桌面端去掉组内间距 */
    flex: 1; /* 占一半宽度 */
  }
  
  .cardDescription {
    text-align: left;
    flex: 1; /* 占一半宽度 */
  }
}

HTML部分 #

<div class="cards">
  <div class="cardGroup">
    <div class="card cardTitle">Title one</div>
    <div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="cardGroup">
    <div class="card cardTitle">Title two</div>
    <div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="cardGroup">
    <div class="card cardTitle">Title three</div>
    <div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="cardGroup">
    <div class="card cardTitle">Title four</div>
    <div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
  <div class="cardGroup">
    <div class="card cardTitle">Title five </div>
    <div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  </div>
</div>

为什么这样做？ #

1. 语义化更清晰：每个cardGroup明确代表一组完整的内容，结构可读性更强。
2. 间距控制更精准：Grid的grid-gap专门负责组与组的间距，组内的间距通过margin或flex的gap单独设置，完全分离了两种间距的控制逻辑。
3. 响应式更灵活：桌面端通过flex横向排列标题和描述，轻松实现左右对齐的效果，移动端则回到垂直堆叠，小间距紧密排列。

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