本文介绍如何将一维 PHP 数组（如 9 个元素）按列优先顺序（column-wise）均匀分配到多个 中，实现类似 CSS Grid 的垂直分栏效果，适用于响应式列表、产品展示等场景。
本文介绍如何将一维 php 数组（如 9 个元素）按列优先顺序（column-wise）均匀分配到多个 `
` 中，实现类似 css grid 的垂直分栏效果，适用于响应式列表、产品展示等场景。
在 Web 开发中，常需将线性数据（如商品、标签或菜单项）以“列优先”方式组织为多列布局——即第 1、4、7 项归入第 1 列，第 2、5、8 项归入第 2 列，依此类推。这与 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, []); // 初始化空列数组
// 按列优先逻辑分配：索引 % 列数 → 决定归属列
foreach ($data as $index => $item) {
$columns[$index % $columnCount][] = $item;
}
?>
<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）：
立即学习“PHP免费学习笔记（深入）”；
.wrapper {
display: flex;
flex-direction: column; /* 垂直主轴，使子 div 垂直排列 */
gap: 80px; /* 列间距 */
}
.wrapper > div {
display: flex;
flex-direction: column; /* 每列内元素垂直堆叠 */
}✅ 关键要点说明：
- 使用 $index % $columnCount 实现列轮询分配，天然支持任意长度数组（即使总数不能被列数整除，也能自动补足）；
- array_fill(0, $n, []) 确保列数组始终存在且为空，避免未定义索引警告；
- 输出时建议对 $item 使用 htmlspecialchars() 防止 XSS，提升安全性；
- 若需适配移动端，可在 .wrapper 上添加 flex-wrap: wrap 并配合媒体查询调整 flex-direction。
该方案简洁、可扩展性强，无需依赖额外库，适用于 PHP 5.6+ 环境，是实现列式数据布局的经典模式。
