Как разбить длинный неупорядоченный список, находящийся в цикле, на два контейнера рядом друг с другом

Question

Я использую WordPress для вставки get_post_meta() в список. Список может быть очень длинным, и когда он достигнет определенного количества, он должен сломаться, и список должен продолжаться рядом с ним, например, если я установлю его на разрыв после 3 пунктов, он должен сделать следующее:

 1. List item 4. List item
 2. List item 5. List item
 3. List item 6. List item

Вот мой код (я сократил его до 6 элементов, у меня есть 15 элементов, и я хочу, чтобы он начинался рядом с ним, когда в списке 8 элементов):

<?php $amenity = get_post_meta($room->ID, "amenity", false); ?>

<ul class="list-group" style="list-style:none;">

<?php 

    foreach ( $amenity as $am ) {
        if (stripos($am, 'wifi') !== false) {
            echo '<li>' . '<i class="fas fa-wifi"></i>'. ' ' . $am . '</li>';
        } 
        elseif (stripos($am, 'fan') !== false) {
            echo '<li>' . '<i class="fab fa-pagelines"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'coffee') !== false) {
            echo '<li>' . '<i class="fas fa-coffee"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'fireplace') !== false) {
            echo '<li>' . '<i class="fas fa-fire"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'umbrella') !== false) {
            echo '<li>' . '<i class="fas fa-umbrella"></i>'. ' ' . $am . '</li>';
        }
        elseif (stripos($am, 'tv') !== false) {
            echo '<li>' . '<i class="fas fa-tv"></i>'. ' ' . $am . '</li>';
        }

    }

?>


</ul>

Какой-нибудь совет, как справиться с этим?

Answer 1

Вместо того, чтобы делать это в коде, вы можете сделать это с помощью простого CSS:

.list-group {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

https://jsfiddle.net/3tugd1h9/

https://developer.mozilla.org/en-US/docs/Web/CSS/columns