Make Django ListView display horizontal rather than vertical-CodePudding

I have just started learning Django and I am trying to display some blogs while following the tutorial https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction. I have a list view class (shown below). However, the elements appear one after the other on seperate lines.

Is there any way I can fix this so, say, three elements appear on one line? I tried using

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

but this makes everything appear in one line. Here is my code.

ListView Class:

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 >
      <a href="{{ blog.get_absolute_url }}">
        <h1 >{{ blog.title }}</h1>
        <h1 >By: {{blog.author}}</h1>
        <p >{{blog.published}}</p>
        <p >{{blog.description}}</p>
        </a>
    </div>
  {% endfor %}
</div>

Any help is appreciated. Thanks in advance

CodePudding user response：

You can use css grid to layout your blogs. The css to organize 3 blogs in one row is:

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

However this is not responsive and will not organize properly on different screen sizes. You can look up how to make grid or flexbox responsive online.