使用CSS column-count搭建网格系统出现排列顺序错误如何解决

• 你当前使用的column-*多列布局本身默认是列优先排列逻辑：会先填满第一列再填充第二列，自然就会出现你现在的列优先排序结果
• 你的CSS类名和HTML实际定义的类名不匹配：HTML容器类为flexarea、子元素类为flexitem，但CSS里写的是.bundleFlexArea、.bundleFlexItem，样式本身没有正确应用到对应元素上。

要实现行优先的2列网格，改用Flex布局或者Grid布局都可以实现需求，两种方案如下：

方案1：Flex布局实现 #

/* 替换原有CSS代码，注意类名和HTML保持匹配 */
.flexarea {
  display: flex;
  flex-wrap: wrap;
}
.flexitem {
  width: 50%;
  box-sizing: border-box;
  /* 如需添加列间距可以在此处加padding，例如：padding: 0 8px; */
}

方案2：Grid布局实现（更适合网格系统开发场景） #

.flexarea {
  display: grid;
  /* 定义2列等宽网格 */
  grid-template-columns: repeat(2, 1fr);
  /* 如需添加行/列间距可以打开下面的注释，数值按需调整 */
  /* gap: 10px; */
}

以上两种方案默认都是行优先排列，直接就能实现你期望的1 2 / 3 4 / 5 6的展示效果。

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