Как отобразить несколько изображений в двухколоночной сетке в django с последовательным отображением

Я пробовал использовать forloop.counter, но он заставляет всю сетку выглядеть беспорядочно и плюс он показывает только три картинки в сетке, когда вы нажимаете на картинку для детального просмотра и скользите, чтобы увидеть другие картинки, он не показывает другие картинки, так как у меня есть около восьми картинок, размещенных в одной сетке. если картинок мало, я должен вернуться в forloop.counter и изменить кратное число, что не является хорошей практикой, как мне лучше поступить в этом случае.

<div uk-lightbox>
        <div class="grid grid-cols-2 gap-2 p-2">
         {% for p in photos %}
         {% if forloop.counter|divisibleby:3 %}
         # The First image goes here
         <a href="{{ p.pic.url }}" class="col-span-2">  
            <img src="{{ p.pic.url }}" alt="" class="rounded-md w-full lg:h-76 object-cover">
        </a>
       
        The second goes here 
        <a href="{{ p.pic.url }}">  
            <img src="{{ p.pic.url }}" alt="" class="rounded-md w-full h-full">
        </a>
        
        # the rest of the pictures goes 
       
        <a href="{{ p.pic.url }}" class="relative">  
            <img src="{{ p.pic.url }}" alt="" class="rounded-md w-full h-full">
            <div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + {{ forloop.counter }} more </div>
        </a>
        {% endif %}
       {% endfor %}
        </div>
     </div>

После того, как я попробовал вышеупомянутое, я сделал это снова, но все равно при нажатии на картинку она не показывает все картинки, счетчик показывает, что есть еще четыре картинки, но когда я нажимаю на них для просмотра, он показывает только 3 картинки из 6 в целом. Вот второй метод кода, который я попробовал.

<div uk-lightbox>
        <div class="grid grid-cols-2 gap-2 p-2">
         {% for p in photos %}
         {% if forloop.first %}
         <a href="{{ p.pic.url }}" class="col-span-2">  
            <img src="{{ p.pic.url }}" alt="" class="rounded-md w-full lg:h-76 object-cover">
        </a>
        {% endif %}
        {% if forloop.last %}
        <a href="{{ p.pic.url }}">  
            <img src="{{ p.pic.url }}" alt="" class="rounded-md w-full h-full">
        </a>
        {% endif %}

        {% if forloop.counter|divisibleby:"4" %}
        <a href="{{ p.pic.url }}" class="relative">  
            <img src="{{ p.pic.url }}" alt="" class="rounded-md w-full h-full">
            <div class="absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl"> + {{ forloop.counter }} more </div>
        </a>
        {% endif %}
       {% endfor %}
        </div>
     </div>

Вот изображение дисплея

Вернуться на верх