title: How to automatically built 3 column cards inside of a row html frontend
body: <p>i am new at django and i am learning html too.</p>
  
  <p>So, i want to do a simple question (maybe).</p>
  
  <p>I am developing a little project in django, and i have a problem with a frontend part. Especifically in a HTML part.</p>
  
  <p>as you can see in the picture, i am developing a kind of a ecommerce. But i have a mistake in my HTML part. I don´t want to show the cards of the articles like a list of rows, like the image. </p>
  
  <p><a href="https://i.stack.imgur.com/Bfiwq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bfiwq.png" alt="enter image description here"></a></p>
  
  <p>I want want to show 3 cards articles by columns, automatically done when i add a new article.</p>
  
  <p>Just like this another picture (made from paint :P):</p>
  
  <p><a href="https://i.stack.imgur.com/dARJ3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dARJ3.png" alt="enter image description here"></a></p>
  
  <p>This is my HTML, to that part:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-lg-7"&gt;
      &lt;h5&gt;Tipo de vista:&lt;button class="btn btn-lg" type="reset""&gt;&lt;a href="{% url 'adminview:article' %}"&gt;&lt;h6&gt;Lista&lt;/h6&gt;&lt;/button&gt;&lt;/a&gt;/&lt;button class="btn btn-lg" type="reset""&gt;&lt;a href="{% url 'adminview:cuadricula' %}"&gt;&lt;h6&gt;Cuadrícula&lt;/h6&gt;&lt;/button&gt;&lt;/a&gt;&lt;/button&gt;&lt;/button&gt;&lt;/h5&gt;
      &lt;div class="card mb-8"&gt;
        &lt;div class="card-header"&gt;
          &lt;i class="fas fa-chart-bar"&gt;&lt;/i&gt;
        Productos disponibles&lt;/div&gt;
        &lt;div class="card-body"&gt;
          &lt;div class="table-responsive"&gt;
            &lt;table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"&gt;
              {% if articulo %}
              {% for articulo in articulo %}
              &lt;div class="col-lg-4 col-md-6 mb-4"&gt;
                &lt;div class="card h-100 w-100"&gt;
                  &lt;a href="article/id/{{ articulo.id }}"&gt;&lt;img class="card-img-top" src="{% url 'home:preload_image' pk=articulo.pk %}" alt=""&gt;&lt;/a&gt;
                  &lt;div class="card-body"&gt;
                    &lt;h4 class="card-title"&gt;
                      &lt;hr class="sidebar-divider"&gt;
                      &lt;a href="article/id/{{articulo.id}}"&gt;{{articulo.nombre_producto}}&lt;/a&gt;
                    &lt;/h4&gt;
                    &lt;h5&gt;{{articulo.precio}} bsS&lt;/h5&gt;
                    &lt;p class="card-text"&gt;{{articulo.Descripcion}}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="card-footer"&gt;
                    {% if articulo.valoracion == 0 %}
                    &lt;span class="text-warning"&gt;&amp;#9734; &amp;#9734; &amp;#9734; &amp;#9734; &amp;#9734;&lt;/span&gt;
                    &lt;h6&gt;{{articulo.id_clasificacion_fk}}&lt;/h6&gt;
                    &lt;h6&gt;Sin valoración&lt;/h6&gt;
                    {% endif %}
                    {% if articulo.valoracion == 1 %}
                    &lt;span class="text-warning"&gt;&amp;#9733; &amp;#9734; &amp;#9734; &amp;#9734; &amp;#9734;&lt;/span&gt;
                    &lt;h6&gt;{{articulo.id_clasificacion_fk}}&lt;/h6&gt;
                    {% endif %}
                    {% if articulo.valoracion == 2 %}
                    &lt;span class="text-warning"&gt;&amp;#9733; &amp;#9733; &amp;#9734; &amp;#9734; &amp;#9734;&lt;/span&gt;
                    &lt;h6&gt;{{articulo.id_clasificacion_fk}}&lt;/h6&gt;
                    {% endif %}
                    {% if articulo.valoracion == 3 %}
                    &lt;span class="text-warning"&gt;&amp;#9733; &amp;#9733; &amp;#9733; &amp;#9734; &amp;#9734;&lt;/span&gt;
                    &lt;h6&gt;{{articulo.id_clasificacion_fk}}&lt;/h6&gt;
                    {% endif %}
                    {% if articulo.valoracion == 4 %}
                    &lt;span class="text-warning"&gt;&amp;#9733; &amp;#9733; &amp;#9733; &amp;#9733; &amp;#9734;&lt;/span&gt;
                    &lt;h6&gt;{{articulo.id_clasificacion_fk}}&lt;/h6&gt;
                    {% endif %}
                    {% if articulo.valoracion == 5 %}
                    &lt;span class="text-warning"&gt;&amp;#9733; &amp;#9733; &amp;#9733; &amp;#9733; &amp;#9733;&lt;/span&gt;
                    &lt;h6&gt;{{articulo.id_clasificacion_fk}}&lt;/h6&gt;
                    &lt;h6&gt;Artículo destacado!&lt;/h6&gt;
                    {% endif %}
                    &lt;a href="{% url 'article:show_article' id_article=articulo.pk %}"&gt;&lt;img src="{% static 'img/verify.png'%}"width="40px" height="40px" /&gt;&lt;/a&gt;
                    &lt;a href="product/edit/{{articulo.id}}"&gt;&lt;img src="{% static 'img/edit.png'%}"width="40px" height="40px" /&gt;&lt;/a&gt;
                    &lt;a href="delete_article/{{articulo.id}}"&gt;&lt;img src="{% static 'img/delete.png'%}"width="40px" height="40px" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              {% endfor %}
              {% endif %}
              {% else %}
              &lt;div class="col-lg-4 col-md-6 mb-4"&gt;
                &lt;h5&gt;No hay artículos disponibles.&lt;/h5&gt;&lt;/div&gt;
                {% endif %}
              &lt;/div&gt;
            &lt;/table&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-lg-5 mt-4 mb-3"&gt;
                &lt;a href="{% url 'adminview:add_article' %}" class="btn btn-primary btn-user btn-block"&gt;&lt;img src="{% static 'img/plus.png'%}"width="20px" height="20px" /&gt;
                  Añadir nuevo producto
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;canvas id="myBarChart" width="100%" height="0"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>In simple words, i actually have it like the first image and i want to have it like the second.</p>
  
  <p>I am using the simple bootstrap theme.</p>
  
  <p>Hope you can help me!. </p>