Php 使用语义网格在响应列中显示自定义分类术语

我正在使用一个包含语义网格的WP主题

例如，如果我想创建3个响应列，我可以在帖子或页面中使用以下标记：

<div class="grid-33">
Column 1
</div>
<div class="grid-33">
Column 2
</div>
<div class="grid-33">
Column 3
</div>

我正在使用php从我在Woocommerce中使用的自定义分类中获取并显示术语链接列表。它可以很好地创建一个列表。问题是名单很长

php的echo部分如下所示：

echo "<h1 class='vendor-title'>MY TITLE</h1>"; 
        echo "<p class='vendor-subtext'>My subtext.</p>";
        echo "<ul class='vendor-list'>";
        foreach ( $terms as $term ) {
            echo '<li><a href="' . get_term_link( $term ) .'">' . $term->name . '</a></li>';
        }
        echo "</ul>";

我想做的是格式化PHP，以便使用语义网格-33类div将结果列表显示在3个响应列中

---

如何编写此代码？

我看不出有什么困难……现在您可能需要获得容器的正确类：

echo '<h1 class="vendor-title">MY TITLE</h1>
<p class="vendor-subtext">My subtext.</p>
<div class="vendor-list grid-container">';

foreach ( $terms as $term ) {
    echo '<div class="grid-33"><a href="' . get_term_link( $term ) .'">' . $term->name . '</a></div>';
}
echo '</div>';

---

我找到了更好的解决办法。您可以使用列计数和列间距css来设置列表的样式

您可以使用@media break points更改列数，以减少tablet和phone视图中的列数

例如：

.vendor-list {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -ms-column-count:4;
    -ms-column-gap:10px;
    column-count: 4;
    column-gap: 10px;
}

@media (max-width: 768px) {
    .vendor-list {    
    -moz-column-count: 2;
    -moz-column-gap: 5px;
    -webkit-column-count: 2;
    -webkit-column-gap: 5px;
    -ms-column-count:2;
    -ms-column-gap:5px;
    column-count: 2;
    column-gap: 5px;
}
}

---

卢瓦克。我也勾选了这个解决方案，因为它确实正确地回显了列。但是基于CSS的解决方案更好，因为它更容易根据屏幕大小设置列的样式。非常感谢你的意见，我已经准备好了。谢谢你的帮助。但我在下面提供的答案更易于风格化。@khunmax我把你的加上去了。谢谢只有当一个文本内容填充单独的列时，您的答案才是好的，但与web中的定义无关。你们也可以看看这个系统。我记得你们最初的问题是和这个系统相关的，而你们在这里的答案并不能真正回答这个问题。所以请避免这样做，因为如果你这样做，没有人会愿意回答你的问题，因为你没有在玩这个游戏，这是不公平的。