Displaying items horizontally instead of columns - html

Question

I need to make an index view for my posts, and I choose a photo gallery for that.In my controller I have paginate set at 10.Unfortunately, my column is divided by one, horizontally : https://imgur.com/a/8sUm5eb .
I want to make this to be divided by 2 columns, 5 items/column.Can you give me a little help with that?Thank you.
My view
<!-- 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">·</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">·</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">·</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 -->

Answer 1

Make your first foreach like this
<div class="row">
Your foreach
</div>