Разделите на 4 для галереи

Question

извините за вопрос здесь, но я не могу понять, что мне нужно сделать, чтобы завершить это.У меня есть галерея, которая извлекается из базы данных, и мне бы хотелось, чтобы каждое деление на 4 добавляло новую строку.Вот мой сайт: https://creativehedgehog.co.uk/gallery

т.е.

<div class="row">
col3
col3
col3
col3
</div>

Это правильно?Вот мой код

<div class="gallery-container">
    <div class="gallery cf">
        @php
            $i=0;
        @endphp
        @foreach($galleries as $gallery)
            @if($i % 4 == 0)
                {{$i}}
                <div class="row">
            @endif

                <div class="col-md-3">
                    <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                        <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                    </a>
                </div>
            @if($i % 4 == 0)
                        {{$i}}
                </div>
            @endif

            @php
                $i++;
            @endphp


        @endforeach

    </div>
</div>

Answer 1

Вы добавляете элемент строки каждую четвертую итерацию, а не помещаете 4 итерации в каждую строку.

Смотрите ниже:

<div class="gallery-container">
    <div class="gallery cf">
        @php
            $i=0;
        @endphp
        @foreach($galleries as $gallery)
            @if($i % 4 == 0)
                @if($i != 0)
                    </div>
                @endif
                {{$i}}
                <div class="row">
            @endif

                <div class="col-md-3">
                    <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                        <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                    </a>
                </div>

            @php
                $i++;
            @endphp


        @endforeach
        </div><!-- last row end -->
    </div>
</div>

Answer 2

Использовать функцию array_chunk. array_chunk

<div class="gallery-container">
        <div class="gallery cf">
        @foreach(array_chunk($galleries,4,true) as $chank)

           <div class="row">

            @foreach($chank as $gallery)
                    <div class="col-md-3">
                        <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                            <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                        </a>
                    </div>
            @endforeach
            </div>
            @endforeach;

        </div>
    </div>

Answer 3

Попробуйте и позвольте загрузочному флексбоксу сделать свое дело

<div class="gallery-container">
   <div class="gallery cf">
     <div class="container-fluid">
       <div class="row">

        @foreach($galleries as $gallery)
                <div class="col-md-3">
                    <a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
                        <img src="{{$gallery->link}}" alt="{{$gallery->title}}">
                    </a>
                </div>
        @endforeach
        </div>
      </div>
    </div>
</div>