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

Question

我正在使用包含语义网格的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，以便使用语义grid-33类div在3个响应列中显示结果列表。

我该如何编码？

Answer 1

我看不到困难在哪里……现在您可能必须正确了解容器的类：

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>';

Answer 2

我为此找到了更好的解决方案。 您可以使用column-count和column-gap CSS来设置列表样式。

您可以使用@media断点来更改列数，以减少平板电脑和手机视图上的列数。

例如：

.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;
}
}