*Build a Blog — chapter 2 of 2.* Grid of posts.

What you will build#

The post grid.

Step by step#

example
html
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
  <a class="group block">
    <div class="aspect-video rounded-xl bg-slate-100 overflow-hidden"></div>
    <h2 class="mt-3 font-semibold group-hover:text-blue-600 transition">Post title</h2>
    <p class="text-sm text-slate-500 line-clamp-2">Excerpt…</p>
  </a>
</div>

Why it works#

group-hover links the whole card visually; line-clamp evens the grid.

Try it yourself#

  • Add tags
  • Add author row
  • Add hover image zoom

Series navigation#

tutorials/index|All tutorials · tutorials/blog/prose|← Article typography