I'm putting together a blog in Django(v4x) and trying to use TailwindCSS v4 to list out the blog posts in a column template, 3 across. They list out 3, going down, not across, what am I doing wrong?

Here is what I have in my blog index.html Django html template

{% block content %}
<div class="border-8 border-purple-900">
  <h1>Articles</h1>

  <div class="grid grid-cols-3 gap-4">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
  </div>

  {% for post in posts %}  
    
      <div class="grid grid-cols-3 gap-1">
        <div class="border-4 border-black">
          <article>
            <h1 class="text-2xl font-semibold">
              <a href="{% url 'blog:blog_detail' post.slug %}">{{ post.title }}</a>
            </h1>
            <h4>{{ post.created_at.date }}</h4>
            <!-- <p>{{ post.author }}</p> -->
            <div>{{ post.content | slice:":50" }}...</div>
          </article>
        </div>
      </div>
    
  {% endfor %}
</div>
{% endblock %}

I even copy+pasted the html from Tailwind docs page and it seems like it should work. What am I doing wrong?

I'm putting together a blog in Django(v4x) and trying to use TailwindCSS v4 to list out the blog posts in a column template, 3 across. They list out 3, going down, not across, what am I doing wrong?

Here is what I have in my blog index.html Django html template

{% block content %}
<div class="border-8 border-purple-900">
  <h1>Articles</h1>

  <div class="grid grid-cols-3 gap-4">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
  </div>

  {% for post in posts %}  
    
      <div class="grid grid-cols-3 gap-1">
        <div class="border-4 border-black">
          <article>
            <h1 class="text-2xl font-semibold">
              <a href="{% url 'blog:blog_detail' post.slug %}">{{ post.title }}</a>
            </h1>
            <h4>{{ post.created_at.date }}</h4>
            <!-- <p>{{ post.author }}</p> -->
            <div>{{ post.content | slice:":50" }}...</div>
          </article>
        </div>
      </div>
    
  {% endfor %}
</div>
{% endblock %}

I even copy+pasted the html from Tailwind docs page and it seems like it should work. What am I doing wrong?

• django
• django-templates
• tailwind-css

1 Answer 1

You'd want to have the grid wrapper outside the foreach loop:

<div class="grid grid-cols-3 gap-1">
  {% for post in posts %}  
    <div class="border-4 border-black">
      <article>
        <h1 class="text-2xl font-semibold">
          <a href="{% url 'blog:blog_detail' post.slug %}">{{ post.title }}</a>
        </h1>
        <h4>{{ post.created_at.date }}</h4>
        <!-- <p>{{ post.author }}</p> -->
        <div>{{ post.content | slice:":50" }}...</div>
      </article>
    </div>
  {% endfor %}
</div>