Unable to view multiple thumbnails in a row - css

Question

I want to Get Thumbnails in a row. It's Getting a single column
I have Used Stock HTML Template The Template is working proper itself
I have corrected the row class but it's not coming as required
My Result
{% extends "base.html" %}
{% load static %}
{{% block content %}
<!-- ##### Listing Content Wrapper Area Start ##### -->
<section class="listings-content-wrapper section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="listings-top-meta d-flex justify-content-between mb-100">
<div class="view-area d-flex align-items-center">
<span>View as:</span>
<div class="grid_view ml-15"><i class="fa fa-th" aria-hidden="true"></i></div>
<div class="list_view ml-15"><i class="fa fa-th-list" aria-hidden="true"></i></div>
</div>
<div class="order-by-area d-flex align-items-center">
<span class="mr-15">Order by:</span>
<select>
<option selected>Default</option>
<option value="1">Newest</option>
<option value="2">Sales</option>
<option value="3">Ratings</option>
<option value="3">Popularity</option>
</select>
</div>
</div>
</div>
</div>
{% if listings %}
{% for listing in listings %}
<div class="row">
<!-- Single Featured Property -->
<div class="col-x-6 col-md-4">
<div class="single-featured-property mb-50">
<!-- Property Thumbnail -->
<div class="property-thumb">
<img src="{{listing.photo_main.url}}" alt="">
<div class="tag">
<span>For Sale</span>
</div>
<div class="list-price">
<p>₹{{listing.price}}</p>
</div>
</div>
<!-- Property Content -->
<div class="property-content">
<h5>{{listing.title}}</h5>
<p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
<p>{{listing.description}}</p>
<div class="property-meta-data d-flex align-items-end justify-content-between">
<div class="new-tag">
<img src="{% static 'img/icons/new.png'%}" alt="">
</div>
<div class="bathroom">
<img src="{% static 'img/icons/bathtub.png'%}" alt="">
<span>{{listing.bathrooms}}</span>
</div>
<div class="garage">
<img src="{% static 'img/icons/garage.png'%}" alt="">
<span>{{listing.garage}}</span>
</div>
<div class="space">
<img src="{% static 'img/icons/space.png'%}" alt="">
<span>{{listing.sqft}} sq ft</span>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
<div class="row">
<div class="col-12">
<div class="south-pagination d-flex justify-content-end">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link active" href="#">01</a></li>
<li class="page-item"><a class="page-link" href="#">02</a></li>
<li class="page-item"><a class="page-link" href="#">03</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
<!-- ##### Listing Content Wrapper Area End ##### -->
{% endblock %}}
I want to get 3 thumbnails in a row
css file is used from a stock template file.
Property listings should appear as in database.
Like This

Answer 1

You're generating a row for each listing. Ideally you'd want just the listings. So you can do:
{% if listings %}
{% for listing in listings %}
{% if forloop.counter0|divisibleby:3 %}<div class="row">{% endif %}
<!-- Single Featured Property -->
<div class="col-x-6 col-md-4">
<div class="single-featured-property mb-50">
<!-- Property Thumbnail -->
<div class="property-thumb">
<img src="{{listing.photo_main.url}}" alt="">
<div class="tag">
<span>For Sale</span>
</div>
<div class="list-price">
<p>₹{{listing.price}}</p>
</div>
</div>
<!-- Property Content -->
<div class="property-content">
<h5>{{listing.title}}</h5>
<p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
<p>{{listing.description}}</p>
<div class="property-meta-data d-flex align-items-end justify-content-between">
<div class="new-tag">
<img src="{% static 'img/icons/new.png'%}" alt="">
</div>
<div class="bathroom">
<img src="{% static 'img/icons/bathtub.png'%}" alt="">
<span>{{listing.bathrooms}}</span>
</div>
<div class="garage">
<img src="{% static 'img/icons/garage.png'%}" alt="">
<span>{{listing.garage}}</span>
</div>
<div class="space">
<img src="{% static 'img/icons/space.png'%}" alt="">
<span>{{listing.sqft}} sq ft</span>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
Or if you want to generate a row for every three listings you'd do:
{% if listings %}
<div class="row">
{% for listing in listings %}
<!-- Single Featured Property -->
<div class="col-x-6 col-md-4">
<div class="single-featured-property mb-50">
<!-- Property Thumbnail -->
<div class="property-thumb">
<img src="{{listing.photo_main.url}}" alt="">
<div class="tag">
<span>For Sale</span>
</div>
<div class="list-price">
<p>₹{{listing.price}}</p>
</div>
</div>
<!-- Property Content -->
<div class="property-content">
<h5>{{listing.title}}</h5>
<p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
<p>{{listing.description}}</p>
<div class="property-meta-data d-flex align-items-end justify-content-between">
<div class="new-tag">
<img src="{% static 'img/icons/new.png'%}" alt="">
</div>
<div class="bathroom">
<img src="{% static 'img/icons/bathtub.png'%}" alt="">
<span>{{listing.bathrooms}}</span>
</div>
<div class="garage">
<img src="{% static 'img/icons/garage.png'%}" alt="">
<span>{{listing.garage}}</span>
</div>
<div class="space">
<img src="{% static 'img/icons/space.png'%}" alt="">
<span>{{listing.sqft}} sq ft</span>
</div>
</div>
</div>
</div>
</div>
{% if forloop.counter0|divisibleby:3 %}</div>{% endif %}
{% endfor %}
{% endif %}