垂直方向と水平方向に配置されたコンテンツを含むレスポンシブな正方形を作成するにはどうすればよいですか?

応答性の高い正方形のグリッド

この記事では、垂直方向と水平方向の応答性の高い正方形を含むレイアウトを作成する方法を検討します。整列されたコンテンツ。このタイプのレイアウトは、ポートフォリオ、ギャラリー、その他の種類のコンテンツを表示するための最新の Web デザインでよく見られます。

従来のアプローチ

レスポンシブな正方形のグリッドは、HTML、CSS、JavaScript の組み合わせを使用しています。関係する手順の概要は次のとおりです:

1. グリッド システムを確立します: フレックスボックスまたは CSS グリッドを使用して、正方形を保持するコンテナを作成します。 .
   
2. 正方形の作成: HTML を挿入div などの要素を使用して、グリッド内に個々の正方形を作成します。
   
3. 正方形の寸法を設定: CSS を使用して、各正方形の幅と高さを定義します。応答性を確保するには、パーセンテージまたは em 単位を使用します。
   
4. コンテンツの中央揃え: フレックスボックスまたは CSS グリッドを使用して、テキスト、画像、アイコンなどのコンテンツを各正方形内の中央に配置します。
   
5. 応答性の処理: メディア クエリを使用して、レイアウトとコンテンツの配置を調整します。
   

高度なアプローチ (CSS グリッド)

CSS グリッドは、より新しく強力なレイアウト システムです。レスポンシブなグリッドの作成を簡素化します。これにより、レイアウトと配置の柔軟性と制御が向上します。

CSS グリッドの使用方法は次のとおりです:

1. グリッド コンテナを確立します: カスタム要素を作成するか、
   を使用します。
   
2. グリッド トラックの定義: CSS の Grid-template-columns プロパティと Grid-template-rows プロパティを使用して、要素内の列と行の数とサイズを定義します。 Grid.
   
3. 正方形を配置: を使用して、特定のグリッド セルに正方形を割り当てます。グリッド列プロパティとグリッド行プロパティ。
   
4. コンテンツの中央揃え: justify-content や align-items などの CSS グリッドの配置プロパティを使用して、各正方形内のコンテンツを中央に配置します。
   
5. 応答性の処理: メディア クエリと CSS グリッドの使用自動的に正方形のサイズを変更し、ビューポート サイズに基づいてレイアウトを調整する自動調整機能。
   

   これらのアプローチとテクニックを利用することで、視覚的に魅力的で応答性の高い正方形のグリッドを作成できます。さまざまな画面解像度やデバイスにシームレスに適応します。