【tailwind】gridレイアウト -カスタム方法も紹介-

はじめに
- この記事の概要
- 対象読者
基本的な使い方
カスタマイズ方法
- 記述できる行や列を増やす
- 各列、各行の幅や高さを変更する
便利なサイト紹介
さいごに

はじめに

この記事の概要

こんにちは、たくまです！
みなさんはtailwindでgridを使用したことはありますか？
通常のCSSで使用したことがある方は多いかと思いますが、実はtailwindでもgridが使用できるんです！
記述方法もシンプルで慣れてしまえば簡単にgridレイアウトを表現できるので、ぜひお試しください！

CSSでのgridレイアウトに関しては過去の記事で紹介しているので、下記をご参照ください。

2022年9月5日【css】display:gridを使って爆速でレスポンシブ対応させよう!

対象読者

tailwindを勉強中の方
tailwindでgridを使用したい方

基本的な使い方

gridの使用

まずは上記のようなgrid レイアウトを表示する記述を紹介します。

<div className="grid grid-cols-1">
 <div className="bg-blue-100">1</div>
 <div className="bg-red-100">2</div>
 <div className="bg-orange-100">3</div>
 <div className="bg-amber-100">4</div>
 <div className="bg-yellow-100">5</div>
 <div className="bg-lime-100">6</div>
 <div className="bg-green-100">7</div>
 <div className="bg-emerald-100">8</div>
 <div className="bg-teal-100">9</div>
 <div className="bg-cyan-100">10</div>
 <div className="bg-sky-100">11</div>
 <div className="bg-white">12</div>
</div>

ポイントは、1行目に記述があるようにgridとgrid-col-1クラスを使用することです。
gridでgridレイアウトの使用を宣言し、grid-cols-1で1列のgridレイアウトを表現しています。

grid-cols-1の数字を2〜12まで選択することで、列数を変更することができます。
例えば上記の記述をgrid-cols-3にした場合は、下記のように3列のレイアウトになります。

grid-col-12にした場合は、12列のレイアウトになります。

col-span-[n]の使用

列をまたぐ(例えば、1,2列目を合体させて1列にする)際はcol-span-[n]を使用します。

<div className="grid grid-cols-3">
 <div className="bg-blue-100 col-span-2">1と２</div>
 <div className="bg-orange-100">3</div>
 <div className="bg-amber-100">4</div>
 <div className="bg-yellow-100">5</div>
 <div className="bg-lime-100">6</div>
 <div className="bg-green-100">7</div>
 <div className="bg-emerald-100">8</div>
 <div className="bg-teal-100">9</div>
 <div className="bg-cyan-100">10</div>
 <div className="bg-sky-100">11</div>
 <div className="bg-white">12</div>
</div>

2行目で記述したように、col-span-2と記述することで、1列目と2列目が合わさって１つの列になりました。

注意：1列目と2列目を合わせるので、元々あった2列目の記述は削除してください。

row-span-[n]の使用

行をまたぐ(例えば、1,2行目を複合させる)際はrow-span-[n]を使用します。

<div className="grid grid-cols-3">
 <div className="bg-blue-100 col-span-2 row-span-2">1と２</div>
 <div className="bg-orange-100">3</div>
 <div className="bg-amber-100">4</div>
 <div className="bg-yellow-100">5</div>
 <div className="bg-lime-100">6</div>
 <div className="bg-green-100">7</div>
 <div className="bg-emerald-100">8</div>
 <div className="bg-teal-100">9</div>
 <div className="bg-cyan-100">10</div>
 <div className="bg-sky-100">11</div>
 <div className="bg-white">12</div>
</div>

2行目で記述したように、row-span-2と記述することで、1行目と2行目が複合されました。

基本的な使用方法は以上です。
上記で紹介した記述を適宜、それぞれの行や列に適用させることで好みのレイアウトを表現できます。

カスタマイズ方法

記述できる行や列を増やす

ここからはカスタマイズ方法を紹介します。

tailwindのgridは、デフォルトで記述できる列は12列まで、行は6行までとなっています。
これを増やしたい場合は、tailwind.config.js ファイルに下記のように記述します。

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        // 16列まで増やす
        '16': 'repeat(16, minmax(0, 1fr))',
      }
　　　　gridTemplateRows: {
        // 8行まで増やす
        '8': 'repeat(8, minmax(0, 1fr))',
      }
    }
  }
}

列を増やす記述は4-6行目、行を増やす記述は8-10行目になります。
上記の例では、grid-cols-16など16列目まで、８行目までのレイアウトが可能になります。

また、上記ではtailwind.config.jsに記述しましたが、gridレイアウトごとに変更することも可能です。

<div className="grid grid-cols-3 grid-rows-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]">
 <div className="bg-blue-100 col-span-2 row-span-2">1と２</div>
 <div className="bg-orange-100">3</div>
 <div className="bg-amber-100">4</div>
 <div className="bg-yellow-100">5</div>
 <div className="bg-lime-100">6</div>
 <div className="bg-green-100">7</div>
 <div className="bg-emerald-100">8</div>
 <div className="bg-teal-100">9</div>
 <div className="bg-cyan-100">10</div>
 <div className="bg-sky-100">11</div>
 <div className="bg-white">12</div>
</div>

上記では、grid-rows-[1fr_1fr_1fr_1fr_1fr_1fr_1fr] と1fr を7つ記述することで、７行まで表現することが可能になります。

各列、各行の幅や高さを変更する

各行、各列の幅や高さを変更する際は、下記のように記述します。

<div className="grid grid-cols-[1fr_1fr_1fr_2fr] grid-rows-[1fr_1fr_1fr_2fr]">
 <div className="bg-blue-100 col-span-2 row-span-2">1と２</div>
 <div className="bg-orange-100">3</div>
 <div className="bg-amber-100">4</div>
 <div className="bg-yellow-100">5</div>
 <div className="bg-lime-100">6</div>
 <div className="bg-green-100">7</div>
 <div className="bg-emerald-100">8</div>
 <div className="bg-teal-100">9</div>
 <div className="bg-cyan-100">10</div>
 <div className="bg-sky-100">11</div>
 <div className="bg-white">12</div>
</div>