この投稿では、Tailwind で列間にギャップを追加する完全な手順について詳しく説明します。

Tailwind で列間にギャップを追加するにはどうすればよいですか?

Tailwind の列間にギャップを追加するには、組み込みの「 ギャップ-{サイズ} ' 効用。列間の水平方向と垂直方向のギャップを表す整数値を指定します。記載されている例を使用して、このタスクを実際に実行してみましょう。

プロジェクトファイルの構造
” ギャップ-{サイズ} 」ユーティリティは、指定されたファイル構造に従う任意の Tailwind プロジェクトに実装できます。

最初の例から始めましょう。

例 1: 「gap-{size}」ユーティリティを使用して行と列の間に同じギャップを追加する
この例では、「gap-{size}」ユーティリティを適用して、指定された列の間に水平方向と垂直方向に同じギャップを追加します。

HTMLコード
次のコードの概要:

上記のコード行では次のようになります。

• まず、メインの CSS ファイルをリンクします。 /dist/output.css ” 既存の HTML ファイルを使用して” インデックス.html ”を使用して” <リンク> 「head」セクションに「」タグを追加します。
• 次に、「body」セクションは、「」を使用する「

  」要素を作成します。 フォントサイズ ”、” フォントの太さ ”、” テキストの配置 ”、” 文字装飾 '、 そしてその ' テキストの色 それぞれ追い風クラス。

• その後、「」を適用する「
  」要素が追加されます。 グリッド 」ユーティリティを使用して、指定された数のグリッド レイアウトにコンテンツを設定します。 マージン ” クラスで水平方向のマージンを設定し、” ギャップ 」ユーティリティを使用して、列間に指定されたギャップを追加します。
• 「
  」要素本体セクションには、さらに 8 つの「

  」要素が含まれています。 枠線の幅 ' そしてその ' ボーダの色 」のクラスをそれぞれ設定します。

出力
上記の HTML コードをライブ サーバーで実行し、出力を分析します。

ご覧のとおり、出力では、両方の次元の列間に指定されたギャップが適切に追加されます。

例 2: 「gap-{size}」ユーティリティを使用して行と列の間に個別にギャップを追加する
” ギャップ-{サイズ} 」ユーティリティは、行の場合は「gap-x-{size}」、列の場合は「gap-y-{size}」として「x（水平）」および「y（垂直）」の寸法を使用して実装することもできます。個々の間のギャップ。

実際の実装を見てみましょう。

HTMLコード
与えられたコードを見てください。

ここで、「 ギャップ-x-{サイズ} ” ユーティリティは行と行の間にギャップを追加し、” ギャップ-y-{サイズ} 」は、列間に指定されたギャップを独立して追加します。

出力

上記の結果は、行と列の間のギャップが適切に適用されていることを確認します。

結論

「Tailwind CSS」は組み込みの「 ギャップ-{サイズ} 」ユーティリティを使用して、列の間にギャップを追加します。また、「 ギャップ-x-{サイズ} ' そしてその ' ギャップ-y-{サイズ} 」ユーティリティ。この投稿では、Tailwind で列間にギャップを追加するための完全な手順を説明しました。