Tailwindで12カラムグリッドをブレイクポイント別に設計する方法

概要

Webデザインやフロントエンド開発で、レスポンシブ対応のグリッドシステムを構築する際、Tailwind CSS を使って 12カラムグリッド をブレイクポイント別に設計する方法を紹介します。

この記事では、以下の条件を前提としています。

• 左右のGutter（外側マージン）とカラム間のGutterを同じ幅に設定
• カラム幅は整数で、可能なら4pxまたは8pxの倍数に揃える
• sm / md / lg / xl / 2xl のブレイクポイントで最適化
• sm/md は6カラム、lg/xl/2xl は12カラム

1. 設計の基本ルール

1. コンテナ幅（Container） は Tailwind デフォルトを使用
   • sm = 640px
   • md = 768px
   • lg = 1024px
   • xl = 1280px
   • 2xl = 1536px
2. 左右Gutter（Padding） = 内側カラム間の gap として統一
3. Content 幅の計算
4. カラム幅の計算

2. Tailwind CSS のブレイクポイントとデバイスの関係

Tailwind CSS のブレイクポイントは、モバイルファーストの設計思想に基づいています。各ブレイクポイントは「その幅以上」の画面に適用されます。

ブレイクポイントの使い方

• モバイルファースト: baseから始めて、画面サイズが大きくなるにつれて上書き
• min-width指定: 各ブレイクポイントは「その幅以上」に適用される
• 重複適用: 複数のブレイクポイント条件を満たす場合、より大きいブレイクポイントが優先

3. ブレイクポイント別の最適グリッド

ポイント

• sm/md は画面が小さいため 12カラムにするとカラム幅が細くなるため6カラムに設定
• xl はGutter32pxで12カラム、カラム幅は8の倍数で綺麗に揃う
• 2xl はGutter48px、12カラムで4の倍数に収まる

4. Tailwind CSS での実装例

<div class="
 px-[30px] grid-cols-6  gap-x-3
 sm:px-10 sm:grid-cols-6  sm:gap-x-4
 md:px-[60px] md:grid-cols-6  md:gap-x-6
 lg:px-24 lg:grid-cols-12 lg:gap-x-8
 xl:px-24 xl:grid-cols-12 xl:gap-x-8
 2xl:px-[72px] 2xl:grid-cols-12 2xl:gap-x-12
">
<!-- 各カラム -->
<div>1</div>
<div>2</div>
...
</div>

• px-* は外側Gutter（左右 padding）
• gap-x-* はカラム間のGutter
• ブレイクポイントに応じてカラム数やGutterを変更

5. 設計のポイントと注意点

1. 左右マージンとカラム間Gutterは同じ値で揃えると、中央寄せや余白の計算が簡単
2. カラム幅を4px/8px倍数に揃えることで、Figmaなどのデザインツールと数値を一致させやすい
3. 小さい画面ではカラム数を減らすことで、文字や要素が極端に細くなるのを防ぐ
4. Tailwind の grid-cols-* と gap-x-* を組み合わせて、柔軟にレスポンシブ対応可能

まとめ

• sm/md は 6カラム、lg/xl/2xl は 12カラムで統一
• Gutterは画面サイズに応じて 16〜48px を採用
• カラム幅は整数で4/8倍数に揃える
• Tailwind では px-* と gap-x-* を組み合わせて簡単に実装可能

この設計を使えば、Tailwind CSS でレスポンシブかつ整列の揃った12カラムグリッドを簡単に構築できます。