移动端三列布局堆叠异常问题求助

问题根源 #

你的布局大概率是把元素拆成了3个独立列容器（每个列内放3个单元格），桌面端3列并排展示，移动端每个列占满宽度，导致堆叠顺序变成「列1内容→列2内容→列3内容」（即1,4,7 → 2,5,8 → 3,6,9）。而你需要的是行优先的堆叠顺序（1,2,3 → 4,5,6 → 7,8,9）。

方案1：调整HTML结构+Flex布局（推荐） #

放弃分列的HTML结构，将所有.l-grid__cell放在同一个flex父容器下，通过flex换行实现行优先排列：

1. 修改HTML结构：
   移除分列容器，所有单元格直接放在父网格容器内：

   <div class="l-grid" data-component-hook-blog-function="blogColumn">
     <div data-sly-list.blog="${blogList}" class="l-grid__cell l-grid__cell--1/3 l-grid__cell--1/1@phone"></div>
   </div>
   

2. 父容器CSS：

   .l-grid {
     display: flex;
     flex-wrap: wrap;
     margin-left: calc(-1 * var(--size-gutter-x)); /* 抵消单元格的margin-left */
   }
   

3. 保留单元格样式：
   保留你现有的.l-grid__cell和.l-grid__cell--1/3样式，移动端的l-grid__cell--1/1@phone补充以下样式：

   .l-grid__cell--1/1@phone {
     width: 100%;
     flex: 0 0 100%;
   }
   

   这样桌面端每行显示3个单元格，移动端自动变为每行1个，堆叠顺序自然符合预期。

方案2：用CSS Grid实现（更简洁） #

如果项目支持CSS Grid，用grid布局实现会更简单：

1. 父容器CSS：

   .l-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--size-gutter-x) var(--size-gutter-y); /* 替代margin控制间距 */
   }
   
   /* 移动端适配 */
   @media (max-width: 768px) {
     .l-grid {
       grid-template-columns: 1fr;
     }
   }
   

2. 简化单元格样式：
   可以去掉单元格的margin-left和margin-bottom，由grid的gap统一控制间距，单元格宽度由grid自动分配：

   .l-grid__cell {
     box-sizing: border-box;
   }
   

   Grid布局天然是行优先排列，移动端自动切换为单列，完全满足顺序要求。

方案3：不修改HTML结构（应急方案） #

如果无法调整现有分列的HTML结构，可通过order属性在移动端强制调整单元格顺序：

@media (max-width: 768px) {
  /* 针对3列布局的单元格顺序调整 */
  .l-grid__cell:nth-child(3n+1) { order: 1; }
  .l-grid__cell:nth-child(3n+2) { order: 2; }
  .l-grid__cell:nth-child(3n) { order: 3; }
}

该方案需要确保单元格数量是3的倍数，扩展性较差，仅适合无法修改HTML结构的场景。

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