当然可以实现这个需求！用CSS Grid是最省心的方案，它不仅能轻松搞定响应式列切换，还能完美适配高度不一的.post元素，保持内容的排列顺序符合预期。

完整实现代码 #

<div class="posts-2-col">
  <div class="post">Post 1<br>我是高度不一样的内容<br>多几行看看效果</div>
  <div class="post">Post 2</div>
  <div class="post">Post 3<br>我也有额外内容<br>测试高度自适应</div>
  <div class="post">Post 4</div>
  <div class="post">Post 5</div>
  <div class="post">Post 6<br>最后一个测试项<br>高度不同也没问题</div>
</div>

/* 基础布局：移动端默认一列 */
.posts-2-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem; /* 元素之间的间距，可根据需求调整 */
  padding: 1rem;
}

/* 桌面/平板端（宽度≥768px）切换为两列 */
@media (min-width: 768px) {
  .posts-2-col {
    grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  }
}

/* 可选：给.post加一些基础样式，让布局效果更直观 */
.post {
  padding: 1.5rem;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

代码解释 #

• 移动端默认布局：grid-template-columns: 1fr 让所有.post元素占满容器宽度，自动排成一列，不管高度如何都会垂直排列。
• 响应式切换：通过@media (min-width: 768px)媒体查询，当屏幕宽度达到平板/桌面尺寸时，将布局改为两列等宽（repeat(2, 1fr)），元素会按行优先的顺序排列（第一行Post1+Post2，第二行Post3+Post4，以此类推），完美适配不同高度的内容。
• 间距与美化：gap属性统一设置元素之间的行列间距，避免手动加margin带来的布局问题；给.post加的基础样式是为了让测试效果更明显，实际项目可以根据设计需求调整。

为什么不用Flexbox？ #

Flexbox也能实现类似布局，但如果用flex-direction: row，不同高度的元素会导致下一行的对齐出现空白；如果用flex-direction: column，元素会先填满第一列再填第二列，排列顺序会变成Post1→Post3→Post5，再Post2→Post4→Post6，不符合常规的阅读顺序。所以CSS Grid是更合适的选择。

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