自适应列：如何实现响应式纵向分栏列表布局（移动端1列，桌面端2-3列）

下面提供两种纯CSS实现方案，均支持未知数量的列表项，满足移动端1列、桌面端2-3列的纵向排列需求（即A D G；B E H；C F I的效果）：

方法1：CSS Columns 原生分栏（推荐） #

CSS原生分栏默认采用纵向填充逻辑，完全匹配你的需求，代码简洁且无需手动计算内容数量。

代码实现 #

/* 基础样式：移动端默认1列 */
.name-list {
  column-count: 1;
  column-gap: 20px; /* 列之间的间距 */
  padding: 0 15px;
}

/* 桌面端（≥768px）显示2列 */
@media (min-width: 768px) {
  .name-list {
    column-count: 2;
  }
}

/* 大屏设备（≥1200px）显示3列 */
@media (min-width: 1200px) {
  .name-list {
    column-count: 3;
  }
}

/* 可选：避免单个列表项被跨列截断 */
.name-item {
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

<div class="name-list">
  <div class="name-item">A</div>
  <div class="name-item">B</div>
  <div class="name-item">C</div>
  <div class="name-item">D</div>
  <div class="name-item">E</div>
  <div class="name-item">F</div>
  <div class="name-item">G</div>
  <div class="name-item">H</div>
  <div class="name-item">I</div>
  <!-- 更多列表项可随意添加 -->
</div>

说明 #

• 浏览器会自动将列表项按纵向分配到对应列中，无需关心列表总数
• break-inside: avoid 用于防止单个列表项被拆分到两列，提升视觉体验
• 可通过 column-gap 调整列间距，适配不同设计需求

方法2：CSS Grid 实现纵向排列 #

如果需要更精细的行列尺寸控制，可使用Grid布局的纵向流模式。

代码实现 #

/* 移动端：1列布局 */
.name-list {
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr;
  padding: 0 15px;
}

/* 桌面端（≥768px）：2列纵向排列 */
@media (min-width: 768px) {
  .name-list {
    grid-template-rows: repeat(auto-fill, minmax(40px, 1fr)); /* 自动生成适配内容的行高 */
    grid-auto-columns: 1fr; /* 每列宽度均等 */
    grid-auto-flow: column; /* 开启纵向填充模式 */
  }
}

/* 大屏设备（≥1200px）：3列纵向排列 */
@media (min-width: 1200px) {
  .name-list {
    grid-template-rows: repeat(auto-fill, minmax(40px, 1fr));
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }
}

.name-item {
  padding: 8px;
  background: #f5f5f5;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

说明 #

• grid-auto-flow: column 是核心属性，让内容优先按列填充，而非默认的行填充
• repeat(auto-fill, minmax(40px, 1fr)) 自动生成足够的行来容纳列表项，无需手动指定行数
• 适合需要自定义行列对齐方式、添加复杂内布局的场景

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