纯HTML/CSS实现多端列表项按宽度重排可行吗？

完全可以实现，核心是利用**CSS Grid的列优先排列（grid-auto-flow: column）**结合媒体查询，针对不同屏幕尺寸调整网格的行数与列数，就能精准匹配你要的三种布局效果。

实现思路 #

常规布局（比如Flex）是行优先填充，但我们需要的是列优先填充：先填满第一列的所有行，再依次填充后续列。CSS Grid的grid-auto-flow: column正好支持这种排列逻辑，配合grid-template-rows定义每行数量，就能控制每列的项数，再通过媒体查询切换不同断点的参数即可。

完整代码示例 #

HTML结构

<div class="list-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
</div>

CSS样式

/* 基础样式：统一项的外观 */
.item {
  padding: 8px 16px;
  border: 1px solid #eee;
  text-align: center;
}

/* 移动端布局：2列，每列10项 */
.list-container {
  display: grid;
  grid-template-rows: repeat(10, auto); /* 共10行 → 每列10项 */
  grid-auto-flow: column; /* 列优先填充 */
  gap: 16px;
}

/* 平板端布局：3列，前两列7项，第三列6项 */
@media (min-width: 768px) {
  .list-container {
    grid-template-rows: repeat(7, auto); /* 共7行 → 前两列填满7项，第三列填剩余6项 */
  }
}

/* 桌面端布局：4列，每列5项 */
@media (min-width: 1024px) {
  .list-container {
    grid-template-rows: repeat(5, auto); /* 共5行 → 每列5项 */
  }
}

效果说明 #

• 移动端（<768px）：网格设为10行，列优先填充后自动生成2列，第一列1-10，第二列11-20，完全匹配需求。
• 平板端（768px-1023px）：网格设为7行，列优先填充后生成3列，前两列各7项（1-7、8-14），第三列填剩余6项（15-20），和你给出的示例一致。
• 桌面端（≥1024px）：网格设为5行，列优先填充后生成4列，每列正好5项（1-5、6-10、11-15、16-20），完美对应目标布局。

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