【tailwind】gridレイアウト -カスタム方法も紹介-
はじめに
この記事の概要
こんにちは、たくまです！
みなさんはtailwindでgridを使用したことはありますか？
通常のCSSで使用したことがある方は多いかと思いますが、実はtailwindでもgridが使用できるんです！
記述方法もシンプルで慣れてしまえば簡単にgridレイアウトを表現できるので、ぜひお試しください！
CSSでのgridレイアウトに関しては過去の記事で紹介しているので、下記をご参照ください。
【CSS】display:gridを使って爆速でレスポンシブ対応させよう!
CSSのdisplay:gridを使ったレスポンシブ対応の方法を解説します。grid-template-areasを活用した直感的なレイアウト指定と、便利な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-cols-1クラスを使用することです。
gridでgridレイアウトの使用を宣言し、grid-cols-1で1列のgridレイアウトを表現しています。
grid-cols-1の数字を2〜12まで選択することで、列数を変更できます。
例えば上記の記述をgrid-cols-3にした場合は、下記のように3列のレイアウトになります。
grid-cols-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と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>2行目で記述したように、col-span-2と記述することで、1列目と2列目が合わさって1つの列になりました。
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と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>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列目まで、8行目までのレイアウトが可能になります。
また、上記では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と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>上記では、grid-rows-[1fr_1fr_1fr_1fr_1fr_1fr_1fr]と1frを7つ記述することで、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と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行目にあるように、4行目と4列目を2frとすることで割合を2倍にしました。
それぞれ大きさが変わっているのがお分かりいただけるかと思います。
上記を用いることで、よりレイアウトの幅が広がります！
便利なサイト紹介
Tailwind Grid Generator
Tailwind Grid Generator - a user-friendly tool designed for web developers to effortlessly create customizable Tailwind CSS grids for seamless web development.
www.tailwindgen.com上記のサイトは表現したいgridレイアウトをサイト上で選択したあとに、tailwindでの記述を生成してくれるサイトです。
そのコードをコピーするだけで実際に描画できます。
かなり便利なので、ぜひ使ってみてください！
さいごに
今回はtailwindでのgrid使用方法を紹介しました。
記述も少なく、慣れてしまえば最後に紹介したような複雑なレイアウトも容易に表現できるかと思います。
カスタマイズもできるので、ぜひお試しください！
この記事を書いた人
