この記事では、Tailwind CSS の行グリッドにブレークポイントとメディア クエリを適用する方法を例に説明します。
Tailwind の行グリッドにブレークポイントとメディア クエリを適用するにはどうすればよいですか?
Tailwind の行グリッドにブレークポイントとメディア クエリを適用するには、HTML プログラムを作成します。次に、「」を使用してさまざまな画面サイズの行数を定義します。 sm ”、” MD ' また ' LG ” によるブレークポイント グリッド行-<値> 」ユーティリティ。次に、画面サイズを調整して、Web ページ上の変更を確認します。
実際の実装を見てみましょう。
ステップ 1: HTML プログラムの行グリッドでブレークポイントとメディア クエリを使用する
HTML プログラムを作成し、「」を使用してさまざまな画面サイズの行数を定義します。 グリッド行-<値> ' 効用。たとえば、「」を使用しました。 MD ” を使用したブレークポイント グリッド行-3 「ユーティリティ」と「 LG ” によるブレークポイント グリッド行-5 」 さまざまな画面サイズで行数を変更するユーティリティ:
< 体 >
< ディビジョン クラス = 「グリッド グリッド行-2 md:グリッド行-3 lg:グリッド行-5 グリッド-フロー列ギャップ-3 m-3 テキスト-センター」 >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 1 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 2 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 3 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 4 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 5 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 6 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 7 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 8 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 9 < / ディビジョン >
< ディビジョン クラス = 「bg-teal-500 p-5」 > 10 < / ディビジョン >
< / ディビジョン >
< / 体 >
ここ：
- 「 グリッド 」クラスを利用してグリッドレイアウトを作成します。
- 「 グリッド行-2 ” クラスは、グリッドに同じサイズの行が 2 つある必要があることを指定します。
- 「 md:グリッド行-3 」クラスは、中程度の画面サイズでグリッドを同じサイズの 3 つの行に変更します。
- 「 lg:グリッド行-5 」クラスは、大きな画面サイズでグリッドを同じサイズの 5 行に変更します。
- 「 グリッドフロー列 ” クラスは、グリッド項目を列内に水平に配置します。
- 「 ギャップ-3 ” クラスは、各グリッド項目間に 3 単位の間隔を設定します。
- 「 m-3 ” クラスは、グリッド コンテナーの周囲に 3 単位のマージンを適用します。
- 「 テキストセンター ” クラスは、各グリッド項目のテキストを中央に設定します。
- 「 bg-ティール-500 ” クラスは、グリッド項目の背景にティール色を設定します。
- 「 p-5 ” クラスは、子の内部のコンテンツに 5 単位のパディングを追加します。
アイテム。
ステップ 2: 出力を確認する
ブレークポイントとメディア クエリが行グリッドに適用されていることを確認するには、画面サイズを変更して HTML Web ページを表示します。
上記の出力では、画面サイズに応じて行数が変化することがわかります。これは、ブレークポイントとメディア クエリが行グリッドに正常に適用されたことを示します。
結論
Tailwind の行グリッドにブレークポイントとメディア クエリを適用するには、「 sm ”、” MD ' また ' LG ” によるブレークポイント グリッド行-<値> 」ユーティリティ。次に、画面サイズを変更して、Web ページ上の変更を確認します。この記事では、Tailwind CSS の行グリッドにブレークポイントとメディア クエリを適用する方法を例示しました。