How to display blog posts over multiple columns

Hi Django Forum!

I’m new to Django and I’m trying to build a Django blog.

When listing blog posts on the homepage in a for loop, a single column of posts doesn’t look so great.

This django blog - https://ctrlzblog.com/ - has posts listed across 3x columns and it looks superb.

How can i replicate listing blog posts like in the blog above across 3x columns? Is there a neat pythonic / django best practice way of doing so?

This is what i’ve got in my blog/views.py file:
from django.views.generic import ListView,
class BlogListView(ListView):
model = Post
template_name = “pages/home.html”

Many thanks

That’s actually up to your templates. The view identifies what data is to be rendered on a page, the template determines how that data ends up being rendered. So it’s up to you do determine what the html/css is that you need for the appearance you’re looking for, and create the template accordingly.

Interesting. Ok. So are you saying that I need to extract three seperate lists from post_list in the blog/views.py file, and then call these three list extracts separately to the .html template file?

If this is right, any ideas how I would implement the extraction of 3x lists from post_list?

This is the home.html code I have:
{% for post in post_list %}

{{ post.title }}

{{ post.body }}

{% endfor %}

So you are suggesting that I substitute “post_list” for “post_list_1”, “post_list_2”, & “post_list_3”, right?

No, actually that’s the exact opposite of what I’m saying. Your view only needs to retrieve one list from the database.

The point that I was making is that your view pretty much doesn’t matter here - it’s the template that is going to do the work. Showing us the template you’re currently using is of more value than showing the view.

Regarding the specifics of a template, there are two different ways you can organize a list into columns.

post 1            post 2            post 3
post 4            post 5            post 6
post 7            post 8            post 9
post 10           post 11           post 12

and

post 1            post 5            post 9
post 2            post 6            post 10
post 3            post 7            post 11
post 4            post 8            post 12

The selection between these two will determine how you can set up your template to render the html.

Side note: When posting code or templates here, enclose each block of code between lines of three backtick - ` characters

The line above this is ```
The line after this is ```

This prevents the forum software from trying to interpret any of your code or template as being formatting instructions for your post itself.