Отображение элементов горизонтально вместо столбцов

Мне нужно сделать индексное представление для моих сообщений, и я выбираю для этого фотогалерею. В моем контроллере я установил paginate на 10. К сожалению, мой столбец разделен на единицу по горизонтали: https://imgur.com/a/8sUm5eb. Я хочу, чтобы это было разделено на 2 столбца, 5 элементов в столбце. Не могли бы вы мне немного помочь с этим? Спасибо.

Мой вид

 <!-- Promo Block -->
      <div class = "container g-pt-100 g-pb-70">
        <!-- News Section -->
        <div class = "u-heading-v3-1 g-mb-30">
          <h2 class = "h5 u-heading-v3__title g-color-gray-dark-v1 text-uppercase g-brd-primary">Latest News</h2>
        </div>
@foreach($posts as $post)

         <div class = "masonry-grid-item col-sm-6 g-mb-30">
                <!-- Blog Background Overlay Blocks -->
                <article class = "u-block-hover">
                  <div class = "g-bg-cover g-bg-white-gradient-opacity-v1--after">
                    <img class = "d-flex align-items-end u-block-hover__main--mover-down" src = "/storage/{{ $post->image }}" alt = "Image Description">
                  </div>
                  <div class = "u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
                    <div class = "u-block-hover__visible g-pa-25">
                       @foreach($post->tags as $tag) 
                      <span class = "g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $tag->name }}</span>
                      <span class = "g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>

                      @endforeach
                      <h2 class = "h4 g-color-white g-font-weight-600 mb-3">
                          <a class = "u-link-v5 g-color-white g-color-primary--hover g-cursor-pointer" href = "/post/{{ $post->id }}">{{ $post->caption }}</a>
                        </h2>
                      <h4 class = "d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
                          By,
                          <a class = "g-color-white-opacity-0_7 text-uppercase" href = "/post/{{ $post->id }}">{{ $post->user->username }}</a>
                        </h4>
                      <span class = "g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>
                      <span class = "g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->created_at->diffForHumans() }}</span>
                      <span class = "g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>
                      <span class = "g-color-white-opacity-0_7 g-font-size-10 text-uppercase">{{ $post->comments()->count() }} comments</span>
                    </div>

                    <a class = "d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href = "/post/{{ $post->id }}">Read more</a>
                  </div>
                </article>
                <!-- End Blog Background Overlay Blocks -->
              </div>
          @endforeach

           </div>
         </div>

        <!-- End News Section -->