Post in two columns in Django

Question

Good evening(or good morning/good afternoon).

I have a question about position within the layout. In the first code that I had made the posts were all of a single side only that I wanted them 2 in 2 columns so I did this:

How is it appearing:

Code:

{% extends 'index.html' %}
{% block content %}

{% for postagens in postagens %}
{{forloop.counter}}
<div class='car'>
    {% if forloop.counter|divisibleby:2 %}
    <div class='esquer'>
        <div class='episodi'> 
            <div class='imag'>
            </div>
            <div class='titu'>
            <h2> {{ postagens.title }} </h2>
              <br/>
            <p> {{ postagens.resumo }} </p>
              <br/>
            <span class='date'> {{ postagens.created_at }} </span>
              <br/>
              <botton><a href='#'> Leia mais </a></botton>
            </div>
        </div>
    </div>
    {% else %}
    <div class='la'>
        <div class='episodi'> 
            <div class='image'>
            </div>
            <div class='titu'>
            <h2> {{ postagens.title }} </h2>
              <br/>
            <p> {{ postagens.resumo }} </p>
              <br/>
            <span class='date'> {{ postagens.created_at }} </span>
              <br/>
              <botton><a href='#'> Leia mais </a></botton>
            </div>
        </div>
    </div>
    </div>
{% endif %}
{% endfor  %}
<style>

.car {
    background-image: url();
    width: 100%;
    height: auto;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    margin-top:0px;
}

.esquer {
    float: left;
    width: 50%;
}

.la {
    float: left;
    width: 50%;
}

.episodi {
    display: grid;
    margin: 20px 20px;
    grid-template-columns: 300px 200px;
    grid-template-rows: 200px 10px 5px;
    grid-template-areas: &quot;imagem&quot; &quot;texto&quot;;
    border-radius: 18px;
    background: #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
    text-align: center;
    margin-right: 20px;
}

.imag {
    grid-area: imagem;
    background: url(https://1.bp.blogspot.com/-ed1VtnBlsmQ/Xxy2KcZ_3bI/AAAAAAAARA8/O8P_KDMTK5oebpSEOAxaTa_XQyueUCN5ACNcBGAsYHQ/s320/kong2.png);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}

.episod p {
    grid-area: texto;
    margin: 25px;
}

.image {
    grid-area: imagem;
    background: url(https://1.bp.blogspot.com/-jhUWXnvjq0M/Xxy8NLFL59I/AAAAAAAARBI/vX_eaqeoebAmF7IwIbPvsUpPXZidv5sSACNcBGAsYHQ/s320/Fallout-4-4K-Main.jpg);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
}
  

</style>

{% endblock %}

But there is a problem, not all posts are appearing and I confess that I’m already a little stuck on it. I thought about trying to make a "Cycle" but I’m not so familiar. I’m starting with Django now.

Could someone help me solve this problem? All posts made enter two columns.

Answer 1

you have a layout problem in this case of columns, already to bring all posts: post.objects.all() to functions using Class-based views

class Posts(Listview): model = Post

{% for postagem in object_list %}