title: How to keep a consistent display of images in django gridview when user upload more pictures, than the condition passed to forloop
body: <p>Okay i have been trying to find way to have a consistent display  of images in a three column gridview in django, the issue is when ever a user upload 6 pictures in to the grid html view,
  it display normal, but when the picture are less than 6 or more than 6 the display becomes messy in the grid and the images looks disorganized in the grid display. How best can i write my forloop so that it would always have a consistent display regardless of the number of images posted to the html grid.
  Here is what i have done so far ,which when i upload 6 picture the gridview looks normal but when i add more pictures or less , it mess-up the appearance of the grid.</p>
  <pre><code>&lt;div class=&quot;grid grid-cols-2 gap-2 p-2&quot;&gt;
              
              {% for p in photos %}
              {% if forloop.counter == 1 %}
              &lt;a href=&quot;{{ p.pic.url }}&quot; class=&quot;col-span-2&quot;&gt;  
                 &lt;img src=&quot; {{ p.pic.url }} &quot; alt=&quot;&quot; class=&quot;rounded-md w-full lg:h-44 object-cover&quot; &gt;
             &lt;/a&gt;
             {% endif %}
             {% if forloop.counter == 5 %}
             &lt;a href=&quot;{{ p.pic.url }}&quot;&gt;  
                 &lt;img src=&quot;{{ p.pic.url }} &quot;  alt=&quot;&quot; class=&quot;rounded-md w-full h-full&quot;&gt;
             &lt;/a&gt;
            {% endif %}
            {% if forloop.counter == 6 %}
             &lt;a href=&quot;&quot; class=&quot;relative&quot;&gt; 
                 &lt;img src=&quot;{{ p.pic.url }}&quot; alt=&quot;&quot; class=&quot;rounded-md w-full h-full&quot;&gt;
                 &lt;div class=&quot;absolute bg-gray-900 bg-opacity-30 flex justify-center items-center text-white rounded-md inset-0 text-2xl&quot;&gt; + {{ forloop.counter }} more &lt;/div&gt;
             &lt;/a&gt;
          {% endif %}
         {% endfor %}
          &lt;/div&gt;
  </code></pre>
  <p>Here is a display of the gridview when 6 pictures are uploaded to it.
  ``<a href="https://i.stack.imgur.com/zS3Ra.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zS3Ra.png" alt="enter image description here" /></a></p>