Tailwind CSS gridクラスの使い方

Tailwind CSSは横12列のグリッド・レイアウト・システムを提供しています。grid クラスを使うことにより、グリッドレイアウトを実現することができます。

.grid-cols-1

Tailwind CSSを使って横1列のグリッド・レイアウトを作成するには、grid および grid-cols-1 クラスを指定する。

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

.grid-cols-2

Tailwind CSSにおいて横2列のグリッドを作成するには、grid-cols-2 クラスを指定する。

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

.grid-cols-3

Tailwind CSSにおいて横3列のグリッドを作成するには、grid-cols-3 クラスを指定する。

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

.grid-cols-4

Tailwind CSSにおいて横4列のグリッドを作成するには、grid-cols-4 クラスを指定する。

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

.grid-cols-5

Tailwind CSSにおいて横5列のグリッドを作成するには、grid-cols-5 クラスを指定する。

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

.grid-cols-6

Tailwind CSSにおいて横6列のグリッドを作成するには、grid-cols-6 クラスを指定する。

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

.grid-cols-7

Tailwind CSSにおいて横7列のグリッドを作成するには、grid-cols-7 クラスを指定する。

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

.grid-cols-8

Tailwind CSSにおいて横8列のグリッドを作成するには、grid-cols-8 クラスを指定する。

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

.grid-cols-9

Tailwind CSSにおいて横9列のグリッドを作成するには、grid-cols-9 クラスを指定する。

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

.grid-cols-10

Tailwind CSSにおいて横10列のグリッドを作成するには、grid-cols-10 クラスを指定する。

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

.grid-cols-11

Tailwind CSSにおいて横11列のグリッドを作成するには、grid-cols-11 クラスを指定する。

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

.grid-cols-12

Tailwind CSSのレスポンシブgrid layout systemにおいて横12列のグリッドを作成するには、grid-cols-12 クラスを指定する。

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

sm:

Tailwind CSSのレスポンシブgrid layout systemにおいて、640px 以上のときの列数を指定する。

原則として横1列のレイアウトだが、幅が640px以上のときに横2列のレイアウトにするには、次のようにする。

<div class="grid grid-cols-1 sm:grid-cols-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

md:

Tailwind CSSのレスポンシブgrid layout systemにおいて、768px 以上のときの列数を指定する。

原則として横1列のレイアウトだが、幅が768px以上のときに横3列のレイアウトにするには、次のようにする。

<div class="grid grid-cols-1 md:grid-cols-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

lg:

Tailwind CSSのレスポンシブgrid layout systemにおいて、1024px 以上のときの列数を指定する。

原則として横1列のレイアウトだが、幅が1024px以上のときに横4列のレイアウトにするには、次のようにする。

<div class="grid grid-cols-1 lg:grid-cols-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

xl:

Tailwind CSSのレスポンシブgrid layout systemにおいて、1280px 以上のときの列数を指定する。

原則として横1列のレイアウトだが、幅が1280px以上のときに横5列のレイアウトにするには、次のようにする。

<div class="grid grid-cols-1 xl:grid-cols-5">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

2xl:

Tailwind CSSのレスポンシブgrid layout systemにおいて、1536px 以上のときの列数を指定する。

原則として横1列のレイアウトだが、幅が1536px以上のときに横6列のレイアウトにするには、次のようにする。

<div class="grid grid-cols-1 2xl:grid-cols-6">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

.gap-px

Tailwind CSSのレスポンシブgrid layout systemにおいて、行間のギャップ（間隔）および列間のギャップを1pxにするには、gap-px クラスを指定する。

<div class="grid gap-px grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-1

Tailwind CSSのレスポンシブgrid layout systemにおいて、行間のギャップ（間隔）および列間のギャップを指定できる。

<div class="grid gap-1 grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-2

Tailwind CSSのレスポンシブgrid layout systemにおいて、行間のギャップ（間隔）および列間のギャップを指定できる。

<div class="grid gap-2 grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-x-px

Tailwind CSSのレスポンシブgrid layout systemにおいて、列間のギャップ（間隔）を1pxにするには、gap-x-px クラスを指定する。

<div class="grid gap-x-px grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-x-1

Tailwind CSSのレスポンシブgrid layout systemにおいて、列間のギャップ（間隔）を指定できる。

<div class="grid gap-x-1 grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-x-2

Tailwind CSSのレスポンシブgrid layout systemにおいて、列間のギャップ（間隔）を指定できる。

<div class="grid gap-x-2 grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-y-px

Tailwind CSSのレスポンシブgrid layout systemにおいて、行間のギャップ（間隔）を1pxにするには、gap-y-px クラスを指定する。

<div class="grid gap-y-px grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-y-1

Tailwind CSSのレスポンシブgrid layout systemにおいて、行間のギャップ（間隔）を指定できる。

<div class="grid gap-y-1 grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4

.gap-y-2

Tailwind CSSのレスポンシブgrid layout systemにおいて、行間のギャップ（間隔）を指定できる。

<div class="grid gap-y-2 grid-cols-2">
  <div class="bg-green-200">1</div>
  <div class="bg-green-200">2</div>
  <div class="bg-green-200">3</div>
  <div class="bg-green-200">4</div>
</div>
1
2
3
4