Подскажите пожалуйста как отсортировать список данных php по 4 справа

Question

Я хочу нарисовать четыре разных списка справа.Но я не знаю, как решить эту проблему, потому что один и тот же список повторяется по вертикали, как это.Форма, которую я хочу:
1234
4567
Я хочу такую ​​форму.

Это мой HTML-код.

@foreach($penpals as $penpal)
<div class="row">
<div class="col" style="border:1px solid red">
    <table border>
        <tr style="border:1px solid red">
            <td>
                @if($penpal->image != null)
                    <a href="#"><img src="{{ $penpal->image }}" alt="No Image"
                            style="max-width: none; height: 170px; display: inline; " height="170px" width="170px"
                            class="img-thumbnail"></a>
                @else
                    <a href="#"><img src="{{ asset("data/ProjectImages/master/logoImage/6.png") }}" alt="No Image"
                        style="max-width: none; height: 170px; display: inline; " height="170px" width="170px"
                        class="img-thumbnail"></a>
                @endif
            </td>
        </tr>
        <tr class="text-center">
            <td>
                    {{ $penpal->user->name  }}
                    @if($penpal->user->gender == 'men')
                        <img src="{{ asset("data/ProjectImages/master/men.png") }}" alt="men">
                    @else
                        <img src="{{ asset("data/ProjectImages/master/women.png") }}" alt="women">
                    @endif
                    {{ $penpal->user->age  }}
                    @if($penpal->user->country == 'ko')
                        <img src="{{ asset("data/ProjectImages/master/korea.png") }}" alt="men">
                    @else
                        <img src="{{ asset("data/ProjectImages/master/japan.png") }}" alt="women">
                    @endif
            </td>
        </tr>
    </table>
</div>
<div class="col" style="border:1px solid red">

</div>
<div class="col" style="border:1px solid red">
    3 of 3
</div>
<div class="col" style="border:1px solid red">
    4 of 4
</div>
 </div>
@endforeach

Я чередую итерации и вставляю данные в оставшийся один делитель, но я не знаю, как упорядочить данные в оставшихся трех делениях

Answer 1

Я думаю, что ваша проблема заключается в попытке решить вашу проблему с помощью таблицы, вместо CSS или начальной загрузки, если вы используете загрузчик, я думаю, да, вы можете сделать что-то вроде этого:

<div class="row">
    @foreach( $penpals as $penpal )
        <div class="col-3">
            //Content here    
        </div>
    @endforeach
</div>

Это должно работать.

Answer 2

Вы можете использовать метод laravel collection chunk() (https://laravel.com/docs/5.8/collections#method-chunk).

Метод chunk разбивает коллекцию на несколько меньших коллекций заданного размера:

@foreach($penpals->chunk(4) as $penpalsGroup)
    <div class="row">
        @forach($penpalsGroup as $penpal)
            <div class="col" style="border:1px solid red">
                <table border>
                    <tr style="border:1px solid red">
                        <td>
                            @if($penpal->image)
                                <a href="#">
                                    <img 
                                        src="{{ $penpal->image }}" 
                                        alt="No Image"
                                        style="max-width: none; height: 170px; width: 170px; display: inline; " 
                                        class="img-thumbnail" />
                                </a>
                            @else
                                <a href="#">
                                    <img 
                                        src="{{ asset("data/ProjectImages/master/logoImage/6.png") }}" 
                                        alt="No Image"
                                        style="max-width: none; height: 170px; width: 170px; display: inline;" 
                                        class="img-thumbnail" />
                                </a>
                            @endif
                        </td>
                    </tr>
                    <tr class="text-center">
                        <td>
                            {{ $penpal->user->name  }}

                            @if($penpal->user->gender == 'men')
                                <img src="{{ asset("data/ProjectImages/master/men.png") }}" alt="men">
                            @else
                                <img src="{{ asset("data/ProjectImages/master/women.png") }}" alt="women">
                            @endif

                            {{ $penpal->user->age  }}

                            @if($penpal->user->country == 'ko')
                                <img src="{{ asset("data/ProjectImages/master/korea.png") }}" alt="men">
                            @else
                                <img src="{{ asset("data/ProjectImages/master/japan.png") }}" alt="women">
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
        @endforeach
    </div>
@endforeach