如何创建非对称双列布局？实现第二列下移的自然方案

更自然的实现方案：使用CSS Grid布局 #

你之前用translateY()的问题在于它会让元素脱离文档流，导致容器高度无法自适应偏移后的元素，进而和下方元素重叠或排版错乱。改用CSS Grid可以在文档流内实现这种错位布局，同时保持排版兼容性。

实现思路

• 用Grid创建固定双列布局，直接控制每列宽度
• 给第二列的所有元素设置margin-top实现向下偏移（偏移量对应盒子高度的50%，即3em）
• 使用gap代替元素margin统一控制间距，布局更简洁可控

修改后的代码

* {
  box-sizing: border-box;
}

main {
  display: grid;
  grid-template-columns: repeat(2, 6em);
  gap: 0.2em; /* 替代原margin，统一控制元素间的水平/垂直间距 */
  width: 12.2em; /* 2*6em + 0.2em gap */
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 6em;
  height: 6em;
  
  background-color: black;
  color: white;
}

/* 第二列元素向下偏移3em（盒子高度的50%） */
.box:nth-of-type(2n) {
  margin-top: 3em;
}

.box--more {
  cursor: pointer;
}

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box box--more">...</div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>

方案优势

1. 保留文档流：margin-top属于文档流内属性，容器main的高度会自动适应偏移后的元素，不会和下方<p>元素重叠
2. 布局稳定：Grid的双列布局比Flex Wrap更适合这种需要精确控制列位置的场景，不会出现换行时的排版错乱
3. 可维护性高：偏移量和间距通过统一CSS属性控制，后续调整更方便

备选方案：Flex布局结合行容器（需修改HTML） #

如果不想用Grid，也可以将每一行的两个元素放在单独的Flex容器中，给第二列元素设置margin-top，但需要调整HTML结构：

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ea.</p>
<main>
  <div class="row">
    <div class="box">1</div>
    <div class="box">2</div>
  </div>
  <div class="row">
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  <div class="row">
    <div class="box">5</div>
    <div class="box box--more">...</div>
  </div>
</main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, corrupti?</p>

* {
  box-sizing: border-box;
}

main {
  width: 12.4em;
}

.row {
  display: flex;
  margin-bottom: 0.2em;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 6em;
  height: 6em;
  margin: 0 0.1em;
  
  background-color: black;
  color: white;
}

.box:nth-of-type(2n) {
  margin-top: 3em;
}

.box--more {
  cursor: pointer;
}

此方案需要修改HTML结构，灵活性不如Grid方案，优先推荐Grid实现。

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