Tailwindcss v4 Grid columns
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?
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>