Tailwind CSS gridクラスの使い方

Tailwind CSSでは grid クラスを使うことにより、グリッドレイアウトを実現することができます。

.grid-cols-1

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

<div class="grid grid-cols-1">
  <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

.grid-cols-2

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

<div class="grid grid-cols-2">
  <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

.grid-cols-3

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

<div class="grid 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

.grid-cols-4

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

<div class="grid 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

.grid-cols-5

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

<div class="grid 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

.grid-cols-6

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

<div class="grid 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

.grid-cols-7

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

<div class="grid grid-cols-7">
  <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

.grid-cols-8

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

<div class="grid grid-cols-8">
  <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

.grid-cols-9

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

<div class="grid grid-cols-9">
  <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

.grid-cols-10

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

<div class="grid grid-cols-10">
  <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

.grid-cols-11

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

<div class="grid grid-cols-11">
  <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

.grid-cols-12

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

<div class="grid grid-cols-12">
  <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

sm:

レスポンシブグリッドレイアウトにおいて、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:

レスポンシブグリッドレイアウトにおいて、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:

レスポンシブグリッドレイアウトにおいて、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:

レスポンシブグリッドレイアウトにおいて、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:

レスポンシブグリッドレイアウトにおいて、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