Display Custom Taxonomy Terms in Responsive Columns using Semantic Grid

Question

I am using a WP theme that includes the semantic grid.

For example, if I want to create 3 responsive columns I can use the following markup in a post or page:

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

I am using php to grab and display a list of term links from a custom taxonomy I am using with Woocommerce. It works nicely to create a list. The problem is that the list is very long.

The echo section of the php is as follows:

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

What I want to do is to format the PHP so that the resulting list is displayed in 3 responsive columns using semantic grid-33 class divs.

How can I code this?

Answer 1

I don't see where is the difficulty… Now you may have to get to correct class for the container:

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

I found a better solution for this. You can use column-count and column-gap css instead to style the list.

You can change the column count using @media break points to have less columns on tablet and phone view.

For example:

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