Tailwindcss v4 Колонки сетки

Я создаю блог на Django(v4x) и пытаюсь использовать TailwindCSS v4 для вывода постов в шаблоне колонки, по 3 в поперечнике. Они выводятся по 3, вниз, а не поперек, что я делаю не так?

Вот что у меня есть в блоге 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 %}

Я даже скопировал и вставил html со страницы документации Tailwind, и кажется, что это должно работать. Что я делаю не так?

Вы бы хотели иметь оболочку grid вне цикла foreach:

<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>
Вернуться на верх