Использование Flex для создания сетки 3x2 | Django Шаблон для цикла

Я использую Django Templating для своего блога и добавляю карточки с помощью цикла for. Я пытаюсь создать структуру 3x2 из добавленных карточек.

В настоящее время каждая карта занимает равное количество места в div.

Я пытаюсь смоделировать то, что есть на Ahrefs Blog. Подобная структура для их последних 6 постов.

Вот мой код HTML/Bootstrap 5:

<div class="latest-articles"> 
            {% for post in post_list %}
            <div class="card mb-4 mx-3 publishedPost">
                <div class="card-body">
                    <h2 class="card-title">{{ post.title }}</h2>
                    <p class="card-text">{{ post.author }} | {{ post.createdOn }}</p> 
                    <p class="card-text">{{post.content|slice:":200" }}</p> 
                    <a href="{% url 'post_detail' post.slug %}" class="btn btn-primary">Read More &rarr;</a> 
                </div>
            </div>
            {% endfor %}
</div>

Вот мой код CSS:

.latest-articles {  
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    padding-top: 0;
    text-align: center;
    position: relative;
    padding: 10px;
  }

  .publishedPost {
    flex: 1;
  }

Любая помощь будет очень признательна

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