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

Question

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