Tailwind CSS - Grid の使い方

📦 Gridとは？

Gridは、要素を行（row）と列（column）で構成されたグリッド状に配置できるCSSレイアウトです。 Tailwindではユーティリティクラスで簡単に利用できます。

🔰 基本クラス

クラス	説明
`grid`	グリッドレイアウトを有効にする
`grid-cols-N`	N列に分ける
`grid-rows-N`	N行に分ける
`gap-N`	縦横の間隔を統一
`gap-x-N / gap-y-N`	横/縦方向だけの間隔
`col-span-N`	N列ぶんの幅を取る
`row-span-N`	N行ぶんの高さを取る

💡 基本的な使用例


      <div class="grid grid-cols-3 gap-4">

        <div>1</div>

        <div>2</div>

        <div>3</div>

      </div>

📏 行（row）の指定


      <div class="grid grid-rows-2 h-48 gap-2">

        <div>上段</div>

        <div>下段</div>

      </div>

🧩 列の合成（col-span）


      <div class="grid grid-cols-3 gap-2">

        <div class="col-span-2">左2列</div>

        <div>右1列</div>

      </div>

📱 レスポンシブなグリッド


      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">

        <div>Item 1</div>

        <div>Item 2</div>

        <div>Item 3</div>

      </div>

🧠 自由なグリッドサイズ


      <div class="grid grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))] gap-4">

        <div>Auto 1</div>

        <div>Auto 2</div>

        <div>Auto 3</div>

      </div>

🔄 その他便利なクラス

クラス	説明
`place-items-center`	中央寄せ（縦横）
`justify-items-center`	水平方向の中央寄せ
`items-center`	垂直方向の中央寄せ
`grid-flow-col`	列方向に並べる

✅ まとめ

やりたいこと	クラス例
グリッドレイアウト	`grid`
列数指定	`grid-cols-3`
隙間	`gap-4`
幅を拡張	`col-span-2`
レスポンシブ	`sm:grid-cols-2`
柔軟レイアウト	`grid-cols-[repeat(auto-fit,_minmax(200px,_1fr))]`

🌐 公式ドキュメント

https://tailwindcss.com/docs/grid-template-columns