如何实现桌面端等高行网格及小屏幕下列堆叠布局？

方法一：CSS Grid（最简洁直观） #

CSS Grid天生支持同一行内的单元格等高，是解决这类问题的最优方案。

HTML 结构

<div class="grid-container">
  <div class="grid-item">内容较少的项</div>
  <div class="grid-item">内容较多的项，高度会自动撑开整行高度</div>
  <div class="grid-item">另一行内容少的项</div>
  <div class="grid-item">另一行内容多的项，和左侧项高度一致</div>
</div>

CSS 代码

.grid-container {
  display: grid;
  /* 桌面端两列平分宽度 */
  grid-template-columns: 1fr 1fr;
  /* 可选：添加列间距 */
  gap: 20px;
  padding: 20px;
}

.grid-item {
  /* 可选：添加内边距、边框美化 */
  padding: 15px;
  border: 1px solid #eee;
}

/* 小屏幕下堆叠成单列 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

关键说明：Grid布局中，同一行的所有单元格高度会自动匹配该行最高元素的高度，无需额外设置。

方法二：Flexbox（兼容旧浏览器场景） #

如果需要兼容不支持Grid的旧浏览器，可以用Flexbox实现，需要按行分组。

HTML 结构

<div class="flex-container">
  <div class="flex-row">
    <div class="flex-item">内容较少的项</div>
    <div class="flex-item">内容较多的项，高度会和左侧一致</div>
  </div>
  <div class="flex-row">
    <div class="flex-item">另一行内容少的项</div>
    <div class="flex-item">另一行内容多的项，高度和左侧一致</div>
  </div>
</div>

CSS 代码

.flex-row {
  display: flex;
  /* 桌面端两列平分宽度 */
  gap: 20px;
  margin-bottom: 20px;
  padding: 0 20px;
}

.flex-item {
  /* 让子元素平分宽度，且自动拉伸高度 */
  flex: 1;
  padding: 15px;
  border: 1px solid #eee;
}

/* 小屏幕下堆叠成单列 */
@media (max-width: 768px) {
  .flex-row {
    flex-direction: column;
  }
  .flex-item {
    margin-bottom: 20px;
  }
  .flex-row:last-child .flex-item:last-child {
    margin-bottom: 0;
  }
}

关键说明：Flex容器的align-items默认值是stretch，所以子元素会自动填充容器高度，实现同一行等高。

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