如何调整CSS columns布局，实现社交网站帖子横向并列

你当前使用的 columns: 2 是列优先的多列流式布局，内容会先填满左侧列再填充右侧列，因此帖子呈现垂直按列分布的效果。这种布局的核心逻辑无法实现你需要的「行优先横向并列」（最新帖子与前一篇左右相邻排列），必须替换为以下两种布局方案：

方案1：CSS Grid（推荐） #

替换原有的columns设置，给.col-8添加以下样式：

.col-8 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列等宽分配空间 */
  gap: 1.5rem; /* 可选：设置帖子之间的间距，可根据需求调整 */
}

方案2：Flexbox #

同样替换columns设置，同时给帖子容器添加宽度控制：

.col-8 {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.content-section {
  flex: 0 0 calc(50% - 0.75rem); /* 占据容器一半宽度，减去gap的一半避免溢出 */
  box-sizing: border-box; /* 确保内边距、边框不会额外增加元素宽度 */
}

以上两种方案都能让帖子按照「先左后右、从上到下」的顺序排列，完全匹配你预期的展示效果。

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