Tailwind CSS では、行スパンにより要素がグリッド内の 2 行以上を占めるようになります。これは、要素が占有する/またがる行数を定義するために使用されます。これにより、ユーザーは複数の行にわたってグリッド項目のサイズと位置を調整し、異なるレイアウトを作成できます。さらに、Web ページ用の柔軟で応答性の高いグリッド レイアウトを作成するために使用できます。
この記事では、Tailwind CSS で行をまたがる方法を例に説明します。
Tailwind で行のスパンを作成するにはどうすればよいですか?
Tailwind で行をまたがるようにするには、HTML プログラムを作成します。次に、「」を活用します。 行-スパン-<値> 」ユーティリティを使用して、またがる行数を定義します。特定の各要素がまたがる行数を定義する必要があります。最後に、HTML Web ページ上の変更を表示して確認します。
実際の実装については、以下の手順を確認してください。
ステップ 1: HTML プログラムで列のスパンを作成する
HTMLプログラムを作成し、「 行-スパン-<値> 」ユーティリティとグリッド項目を使用して列のスパンを作成します。たとえば、「」を使用しました。 行スパン-3」、「行スパン-2」、および「行スパン-4」 」ユーティリティは以下のとおりです。
< 体 >
< ディビジョン クラス = 'グリッド グリッド-行-4 グリッド-フロー-列 ギャップ-3 m-3 テキスト-センター' >
< ディビジョン クラス = 「行-スパン-3 bg-teal-500 p-5」 > 1 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 2 < / ディビジョン >
< ディビジョン クラス = 「行-スパン-2 bg-teal-500 p-5」 > 3 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 4 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 5 < / ディビジョン >
< ディビジョン クラス = 「行-スパン-4 bg-teal-500 p-5」 > 6 < / ディビジョン >
< / ディビジョン >
< / 体 >
ここで、親の
- 「 グリッド 」クラスを利用してグリッドレイアウトを作成します。
- 「 グリッド行-4 ” クラスはグリッド内の行数を 4 に設定します。
- 「 グリッドフロー列 ” クラスは、グリッド項目を列内に水平に配置します。
- 「 ギャップ-3 ” クラスは、各グリッド項目間に 3 単位の間隔を設定します。
- 「 m-3 ” クラスは、グリッド コンテナーの周囲に 3 単位のマージンを適用します。
- 「 テキストセンター ” クラスは、各グリッド項目のテキストを中央に設定します。
子の
- 「 行スパン-3 ” クラスは、要素がグリッド内の 3 行にまたがる必要があることを指定します。
- 「 行スパン-2 ” クラスは、要素がグリッド内の 2 行にまたがる必要があることを示します。
- 「 行スパン-4 ” クラスは、要素がグリッド内の 4 行にまたがる必要があることを指定します。
- 「 bg-ティール-500 ” クラスは、グリッド項目の背景にティール色を設定します。
- 「 p-5 ” クラスは、子の 項目内のコンテンツに 5 単位のパディングを追加します。
ステップ 2: 出力を確認する
HTML Web ページを表示して、行範囲が適用されているかどうかを確認します。
上記の出力では、指定に従って行スパンが正常に適用されたことがわかります。
結論
Tailwind で行をまたがるようにするには、「」を使用します。 行-スパン-<値> 」ユーティリティを HTML プログラムで使用し、各要素がまたがる行数を指定します。確認するには、HTML Web ページの変更を確認してください。この記事では、Tailwind CSS で行のスパンを作成する方法を例示しました。