本文介绍如何将 PHP 一维数组（如 9 个元素）按列优先方式均分到多个 <div> 中，实现类似 CSS Grid 的垂直分列效果，适用于菜单、产品列表等需列式排布的场景。
本文介绍如何将 php 一维数组（如 9 个元素）按列优先方式均分到多个 `
` 中，实现类似 css grid 的垂直分列效果，适用于菜单、产品列表等需列式排布的场景。
在 Web 开发中，常需将线性数据结构（如商品、标签或导航项）以“列优先”方式组织为多列垂直布局——即第 1 列放索引 0、3、6 的元素，第 2 列放索引 1、4、7 的元素，以此类推。这与 array_chunk() 的行优先分块不同，需借助取模运算（%）实现列式重分布。
以下为推荐实现方案：
<?php
$data = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9'];
$columnCount = 3;
$columns = array_fill(0, $columnCount, []); // 初始化空列数组
// 按列索引分配：key % columnCount 决定归属列
foreach ($data as $key => $value) {
$columns[$key % $columnCount][] = $value;
}
?>
<div class="wrapper">
<?php foreach ($columns as $column): ?>
<div>
<?php foreach ($column as $item): ?>
<p><?= htmlspecialchars($item) ?></p>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
</div>配套 CSS（修正原问题中的拼写错误：colum → column）：
.wrapper {
display: flex;
flex-direction: column; /* 注意：此处应为 column（垂直主轴），但实际需水平排列列 → 改用 row */
gap: 80px;
/* ✅ 正确写法：让三列水平并排 */
}
.wrapper > div {
display: flex;
flex-direction: column;
}
/* 推荐更现代写法（可选） */
/* .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; } */⚠️ 注意事项：
立即学习“PHP免费学习笔记（深入）”；
- flex-direction: column 在 .wrapper 上会导致三列垂直堆叠，与预期（三列水平排列）不符；应改为 flex-direction: row，或直接使用 display: grid 更语义清晰；
- 务必对输出内容使用 htmlspecialchars() 防止 XSS，尤其当 $item 来自用户输入时；
- 若数组长度不能被列数整除（如 10 个元素分 3 列），该方案仍能正确分配（最后一列多 1 项），无需额外处理；
- 此逻辑本质是「转置」操作：将原数组视为按行填充的矩阵后，按列读取。
该方法简洁、可扩展（仅需调整 $columnCount 即可适配任意列数），且不依赖外部库，适合大多数 PHP 模板场景。
