Сделать отображение Django ListView горизонтальным, а не вертикальным

Я только начал изучать Django и пытаюсь отобразить несколько блогов, следуя учебнику https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction. У меня есть класс представления списка (показан ниже). Однако элементы отображаются один за другим на отдельных строках.

Есть ли способ исправить это, чтобы, скажем, три элемента отображались на одной строке? Я пробовал использовать

#all-blogs {
    display: inline-flex;
}

но это заставляет все отображаться в одной строке. Вот мой код.

Класс ListView:

class BlogListView(generic.ListView):
    model = Blog
    context_object_name = 'all_blogs'
    paginate_by = 15

blog_list.html

<div id="all-blogs">
  {% for blog in all_blogs %}
    <div class="blog">
      <a href="{{ blog.get_absolute_url }}">
        <h1 class="blog-title">{{ blog.title }}</h1>
        <h1 class="blog-author">By: {{blog.author}}</h1>
        <p class="blog-published">{{blog.published}}</p>
        <p class="blog-description">{{blog.description}}</p>
        </a>
    </div>
  {% endfor %}
</div>

Любая помощь будет принята с благодарностью. Заранее спасибо

Вы можете использовать css grid для компоновки ваших блогов. Css для организации 3 блогов в один ряд выглядит следующим образом:

#all-blogs{
  display: grid;
  grid-template-columns: auto auto auto;
}

Однако это не является отзывчивым и не будет правильно организовано на разных размерах экрана. Как сделать сетку или флексбокс отзывчивыми, можно узнать в Интернете.

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