AstroとGridで作る、動的サイズのタグクラウド

タグ一覧ページといえば、文字サイズだけを変える「クラウド」表示が一般的ですが、今回はGridレイアウトを使って、よりモダンな「弁当箱（Bento Grid）」スタイルで作ってみました。

実装のポイント

ただのGridではなく、記事数（人気度）に応じてセルのサイズを変えています。

1. Top 20%: 特大サイズ (col-span-2 row-span-2)
2. Next 30%: 横長サイズ (col-span-2)
3. Default: 通常サイズ (col-span-1)

これをTailwind CSSのクラスで動的に割り当てます。

// ランキングロジック（イメージ）
const tagsWithStyle = sortedTags.map(([tag, count], index) => {
    const isTop = index < sortedTags.length * 0.2;
    // ...
    return {
        className: isTop ? "md:col-span-2 md:row-span-2" : "..."
    };
});

CSS Gridの魔法: grid-auto-flow: dense

可変サイズのグリッドで重要なのが grid-flow-dense です。 これを指定すると、大きなアイテムによってできた「隙間」に、小さなアイテムが自動的に入り込んでくれます。

<div class="grid grid-flow-dense ...">
  {tags.map(tag => (
    <div class={tag.className}>...</div>
  ))}
</div>

これにより、パズルのように綺麗に埋まったレイアウトが自動的に完成します。 CSS Grid、便利すぎますね。