List of terms in alphabetical order under the respective initial letter and within columns

Question

I am trying to print a listing of "brands" names in alphabetical order under the respective initial letter of the alphabet within columns. The problem is that I want to print three columns with three brands inside as seen in the attached image.

<?php

$list = '';
$groups = array();
$tags = get_terms('brand',$args);
if( $tags && is_array( $tags ) ) {
foreach( $tags as $tag ) {
  $first_letter = strtoupper( $tag->name[0] );
  $groups[ $first_letter ][] = $tag;
}
if( !empty( $groups ) ) {
  foreach( $groups as $letter => $tags ) {
    $list .= '<div><h3>' . $letter . '</h3>';
    $counterCustom = 0; //
    foreach( $tags as $tag ) {
    if ($counterCustom == 0 ) { //
        $list .= '<div class="container"><div class="row"><div class="col-lg-4"><ul><li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    }
    if($counterCustom == 1) { //
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    } //
    elseif($counterCustom == 2 ) { //
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    } //
    elseif($counterCustom == 3 ) { //
        $list .= '</ul></div><div class="col-lg-4"><ul><li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    } //
    elseif($counterCustom == 4) { //
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    } //
    elseif($counterCustom == 5) { //
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li></ul></div><div class="col-lg-4"><ul>';
    } //
    elseif($counterCustom == 6) { //
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    } //
    elseif($counterCustom == 7) { //
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    } //
    elseif($counterCustom == 8) { //
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li></ul></div></div></div>';
    } //
    $counterCustom++;
      }
    $list .='';
  }
}
echo $list;

?>

This is what I want to do:

Answer 1

Let CSS handles the grid layout.

For example with markup like this:

<ul class="term-list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

You can create that layout simply with this CSS:

.term-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: 1rem;
  grid-gap: 1rem;
}

So just abandon the custom counter and each loop only append the <li>.

foreach( $groups as $letter => $tags ) {
    $list .= '<div><h3>' . $letter . '</h3> <ul>';

    foreach( $tags as $tag ) {
        $list .= '<li><a href="/brand/'.$tag->slug.'">'.$tag->name.'</a></li>';
    }
    
    $list .= '</ul></div>';
}