PHP如何对数组返回元素分组 添加CSS类实现PDF列表三列网格布局

方案1：按需求添加left/mid/right类名实现 #

修改原PHP循环代码，通过索引取模3自动为每个列表项匹配对应的类名：

<ul>
<?php
// 循环时追加索引参数
foreach($files as $index => $item){
    // 按索引模3的结果分配对应类名
    $mod = $index % 3;
    if($mod == 0){
        $class = 'left';
    }elseif($mod == 1){
        $class = 'mid';
    }else{
        $class = 'right';
    }
    echo "<li class='$class'><a href='$item'>" . basename($item) . " 更新于 " . @date('Y年m月d日 H:i:s', filemtime($item)) . "</a></li>";
}
?>
</ul>

渲染后生成的HTML结构完全匹配你的类名要求，搭配预先写好的CSS grid三列布局即可生效。

方案2：更优的原生CSS Grid实现（无需额外加类） #

不需要手动给每个元素加类，直接用CSS Grid的自动排列特性就能实现三列布局，后续调整列数也不需要修改PHP代码，灵活性更高：

1. PHP代码不需要修改类名逻辑，正常输出普通列表即可：

<ul class="pdf-list">
<?php
foreach($files as $item){
    echo "<li><a href='$item'>" . basename($item) . " 更新于 " . @date('Y年m月d日 H:i:s', filemtime($item)) . "</a></li>";
}
?>
</ul>

2. 补充对应CSS样式：

.pdf-list {
    display: grid;
    /* 定义三列等宽布局 */
    grid-template-columns: repeat(3, 1fr);
    /* 可自定义行列间距 */
    gap: 16px 24px;
    /* 去掉ul默认样式 */
    list-style: none;
    padding: 0;
    margin: 0;
}

这种方式会自动把列表项按从左到右、从上到下的顺序排列成三列，10条数据的渲染效果和你要求的布局完全一致。

内容的提问来源于stack exchange，提问作者Dirty Bird Design