本文介绍如何将 PHP 一维数组（如 9 个元素）按列优先方式均分到多个 中，实现类似 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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站"><img
src="https://img.php.cn/upload/skill/000/000/081/179040786932301.jpg" alt="btpanel phpsite 宝塔面板PHP网站" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站" class="overflowclass">btpanel phpsite 宝塔面板PHP网站</a>
<p class="overflowclass">宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理</p>
</div>
<a rel="nofollow" href="/xiazai/skill5233" title="btpanel phpsite 宝塔面板PHP网站" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<?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; } */
⚠️ 注意事项：
- flex-direction: column 在 .wrapper 上会导致三列垂直堆叠，与预期（三列水平排列）不符；应改为 flex-direction: row，或直接使用 display: grid 更语义清晰；
- 务必对输出内容使用 htmlspecialchars() 防止 XSS，尤其当 $item 来自用户输入时；
- 若数组长度不能被列数整除（如 10 个元素分 3 列），该方案仍能正确分配（最后一列多 1 项），无需额外处理；
- 此逻辑本质是「转置」操作：将原数组视为按行填充的矩阵后，按列读取。
该方法简洁、可扩展（仅需调整 $columnCount 即可适配任意列数），且不依赖外部库，适合大多数 PHP 模板场景。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
