# How to display blog posts over multiple columns

**URL:** <https://forum.djangoproject.com/t/how-to-display-blog-posts-over-multiple-columns/17783>\
**Category:** Templates & Frontend\
**Created:** [December 23, 2022, 12:06am UTC](https://forum.djangoproject.com/t/how-to-display-blog-posts-over-multiple-columns/17783 "2022-12-23T00:06:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jarthoben](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jarthoben/32/11034_2.png) [@jarthoben](https://forum.djangoproject.com/u/jarthoben)\
**Post date:** [December 23, 2022, 12:06am UTC](https://forum.djangoproject.com/t/how-to-display-blog-posts-over-multiple-columns/17783/1 "2022-12-23T00:06:48Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [December 23, 2022, 12:21am UTC](https://forum.djangoproject.com/t/how-to-display-blog-posts-over-multiple-columns/17783/2 "2022-12-23T00:21:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jarthoben](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/jarthoben/32/11034_2.png) [@jarthoben](https://forum.djangoproject.com/u/jarthoben)\
**Post date:** [December 23, 2022, 8:23am UTC](https://forum.djangoproject.com/t/how-to-display-blog-posts-over-multiple-columns/17783/3 "2022-12-23T08:23:11Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [December 23, 2022, 12:26pm UTC](https://forum.djangoproject.com/t/how-to-display-blog-posts-over-multiple-columns/17783/4 "2022-12-23T12:26:41Z")

</div>

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.

```auto
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

```auto
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

````plaintext
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.