如何实现含跨两列元素的双列Flexbox布局

要让.two-column元素跨满原col1和col2对应的两列，你需要调整布局结构——原来的Flex布局把内容拆成了两个独立的子容器（col1和col2），子容器内的元素无法突破容器边界。改用Grid布局可以更轻松实现跨列效果：

修改后的CSS #

.main-div {
  display: grid; /* 替换flex为grid布局 */
  grid-template-columns: 66% 33%; /* 定义两列的宽度比例 */
  gap: 1%;
  width: 100%;
}

.one-column {
  background-color: green;
}

.two-column {
  background-color: yellow;
  grid-column: 1 / -1; /* 让元素跨占所有列 */
}

修改后的HTML #

<div class='main-div'>
  <!-- 原col1内的元素直接放入grid容器 -->
  <div class='one-column'>
    Some Text in Pos 1-1
  </div>
  <div class='one-column'>
    Some Text in Pos 1-2
  </div>
  <div class='two-column'>
    Some Text in Pos 1-3
  </div>
  <div class='one-column'>
    Some Text in Pos 1-4
  </div>
  <!-- 原col2内的元素直接放入grid容器，自动归到第二列 -->
  <div class='one-column'>
    Some Text in Pos 2-1
  </div>
</div>

关键说明 #

• Grid布局支持直接控制元素在网格中的位置，grid-column: 1 / -1表示元素从第一列起始位置延伸到最后一列的结束位置，自然跨满两列。
• 移除了col1和col2容器后，所有子元素直接处于Grid容器下，Grid会自动按顺序排列元素：前四个元素默认填充第一列，最后一个元素填充第二列；如果需要更精确的位置控制，可给元素单独设置grid-column属性指定列范围。

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