Tailwind CSS グリッド システムの使用方法

序章

この記事では、Tailwind のユーティリティベースのグリッド システムを使用して応答性の高いグリッド レイアウトを作成するプロセスについて説明します。

馴染みのない人のために説明すると、Tailwind は Web インターフェイスの構築プロセスを加速するユーティリティ優先の CSS フレームワークであり、生産性を向上させるものとしてよく知られています。 Tailwind は、クラシックな 12 列のグリッドをさまざまな事前定義された CSS ユーティリティ クラスに分解し、組み合わせ、一致、カスタマイズして、デザイン ビジョンを実現します。

このガイドは、Tailwind プロジェクトのセットアップ方法を知っているあらゆるレベルの開発者に適しています。Tailwind を初めて使用する場合は、公式ドキュメントを確認して開始してください。

このガイドの成果

このガイドを終えると、Tailwind のグリッド システムで構築されたヘッダー、メイン、サイド、フッター (聖杯スタイル) を備えたレスポンシブ レイアウトが完成します。ここで説明する原則は、より多くのタイプのレイアウトに適用できます。

ステップ 1: 初期化 HTML

次の HTML スケルトンから始めて、このマークアップに Tailwind クラスを追加してレイアウトを構築します。

<div class="text-white">
  <header class="bg-slate-600 p-4">Header</header>
  <aside class="bg-slate-600 p-4">aside</aside>
  <main class="bg-slate-600 p-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </main>
  <footer class="bg-slate-600 p-4">Footer</footer>
</div>

ヘッダー、メイン、サイド、フッターというセマンティック要素を使用していることに注意してください。セマンティック HTML 要素は必須ではありませんが、アクセシビリティの目的で推奨されます。
レイアウトを視覚的にわかりやすくするために、メイン要素内にプレースホルダー テキストを追加し、Tailwind のユーティリティ クラスを使用して少しの色を追加しました (好きな色を使用してください)。

ステップ 2: グリッド コンテナーを追加する

Tailwind の Grid システムを使用するには、2 つのクラスを追加する必要があります。1 つ目は、grid です。設定された数の列を適用するには、grid-cols-{n} クラスを使用して明示的に追加する必要があります。行と列の間にもギャップを適用しましょう。

<div class="grid grid-cols-12 gap-1">

見てみると、レイアウトが歪んでいるのがわかります。これは、各要素が何列にまたがるべきかを指定していないためです。列要素の範囲数を指定しない場合、CSS グリッドは暗黙的にコンテンツを使用可能な列に割り当てます。

ステップ 3: 列をまたがる

列をまたぐには、col-span-{n} クラスを使用します。ここで、{n} は、またがる列の数です。ここで、レイアウトが最終的に表示されます。

<div class="text-white container m-auto grid grid-cols-12 gap-1">
  <header class="col-span-12 bg-slate-600 p-4">Header</header>
  <aside class="col-span-4 bg-slate-600 p-4">aside</aside>
  <main class="col-span-8 bg-slate-600 p-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </main>
  <footer class="col-span-12 bg-slate-600 p-4">Footer</footer>
</div>

ステップ 4: レイアウトの一元化

さらに 2 つのクラスを適用してグリッドを集中化しましょう。コンテナ クラスはグリッドに max-width を追加し、m-auto クラスは中央に配置する margin: auto を追加します。

<div class="container m-auto grid grid-cols-12">

ステップ 5: レイアウトをレスポンシブにする

レイアウトはありますが、応答性がありません。小さな画面でのグリッドの動作を変更しましょう。md:grid-cols-{n} クラスを使用して、中規模以上の画面で使用する列の数を指定します。

<div class="text-white container m-auto grid grid-cols-4 md:grid-cols-12 gap-1">

この変更によりレイアウトが乱れますが、すぐに修正します。

ステップ 2 で、col-span-12 クラスをヘッダー要素とフッター要素に追加しましたが、ビューポート幅 768px より上には 12 列しかありません。これにどう対処すればよいでしょうか?
方法はいくつかありますが、その 1 つは、md:col-span-12 などのメディア固有のユーティリティクラスを使用する方法です。

<div class="text-white container m-auto grid grid-cols-4 md:grid-cols-12 gap-1">
  <header class="col-span-4 md:col-span-12 bg-slate-600 p-4">Header</header>
  <aside class="col-span-4 bg-slate-600 p-4">aside</aside>
  <main class="col-span-4 md:col-span-8 bg-slate-600 p-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </main>
  <footer class="col-span-4 md:col-span-12 bg-slate-600 p-4">Footer</footer>
</div>

前の例は少し冗長なので、代わりにブレークポイントに関係なくすべての列にまたがるcol-span-fullクラスを使用しましょう。

<div class="container m-auto grid grid-cols-4 gap-1 text-white md:grid-cols-12">
  <header class="col-span-full bg-slate-600 p-4">Header</header>
  <aside class="col-span-4 bg-slate-600 p-4">aside</aside>
  <main class="col-span-4 bg-slate-600 p-4 md:col-span-8">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </main>
  <footer class="col-span-full bg-slate-600 p-4">Footer</footer>
</div>

そして、Tailwind の Grid System で構築された完全にレスポンシブなレイアウトが完成しました。Tailwind Play での動作例を次に示します。

ボーナス: ネストされたグリッド

データ配列のマッピングに使用できるネストされたグリッド要素を追加します。製品カードなどに便利です。

<div class="container m-auto grid grid-cols-4 gap-1 text-white md:grid-cols-12">
  <header class="col-span-full bg-slate-600 p-4">Header</header>
  <aside class="col-span-4 bg-slate-600 p-4">aside</aside>
  <main class="col-span-4 bg-slate-600 p-4 md:col-span-8 grid gap-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-1">
      <div class="text-center p-4 bg-slate-800">One</div>
      <div class="text-center p-4 bg-slate-800">Two</div>
      <div class="text-center p-4 bg-slate-800">Three</div>
      <div class="text-center p-4 bg-slate-800">Four</div>
      <div class="text-center p-4 bg-slate-800">Five</div>
      <div class="text-center p-4 bg-slate-800">Six</div>
      <div class="text-center p-4 bg-slate-800">Seven</div>
      <div class="text-center p-4 bg-slate-800">Eight</div>
    </div>
  </main>
  <footer class="col-span-full bg-slate-600 p-4">Footer</footer>
</div>

Tailwind Play で実際の例をチェックしてください。
読んでいただきありがとうございます。