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

Ока я пытался найти способ последовательного отображения изображений в трехколоночном gridview в django, проблема в том, что когда пользователь загружает 6 картинок в grid html view, он отображается нормально, но когда картинок меньше 6 или больше 6, то отображение становится беспорядочным, и картинки выглядят неорганизованно в сетке. Как лучше написать мой цикл forloop, чтобы он всегда имел последовательное отображение независимо от количества изображений, размещенных в html-сетке. Вот что я сделал до сих пор, когда я загружаю 6 изображений, вид сетки выглядит нормально, но когда я добавляю больше изображений или меньше, это портит внешний вид сетки.

<div class="grid grid-cols-2 gap-2 p-2">
            
            {% for p in photos %}
            {% if forloop.counter == 1 %}
            <a href="{{ p.pic.url }}" class="col-span-2">  
               <img src=" {{ p.pic.url }} " alt="" class="rounded-md w-full lg:h-44 object-cover" >
           </a>
           {% endif %}
           {% if forloop.counter == 5 %}
           <a href="{{ p.pic.url }}">  
               <img src="{{ p.pic.url }} "  alt="" class="rounded-md w-full h-full">
           </a>
          {% endif %}
          {% if forloop.counter == 6 %}
           <a href="" 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>

Вот отображение вида gridview, когда в него загружено 6 изображений. ``

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