CSS を使用してコンテンツを中央に配置したレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?

Grid of Responsive Squares

垂直方向と水平方向に配置されたコンテンツを含むレスポンシブな正方形を備えたレイアウトを作成するには、特定の CSS テクニックを実装する必要があります。

CSS グリッドレイアウト

グリッドベースのレイアウトを作成するには、CSS グリッド プロパティを利用してグリッド構造を定義します。グリッド内で、grid-template-columns を使用して、正方形の列の数と幅を指定します。例:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

正方形の定義

個々の正方形を定義するには、それらのクラスを作成し、次のスタイルを適用します:

.square {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

レスポンシブサイズ

正方形の応答性を確保するには、幅と高さにパーセントベースの寸法を使用します。アスペクト比: 1 / 1; を使用して、各正方形のアスペクト比を 1:1 に設定します。

垂直方向の配置

正方形内のコンテンツを垂直方向に配置するには、align-items: center; を使用します。

水平方向の配置

水平方向の配置の場合は、justify-content: center; を適用します。

画像処理

画像を処理するには、object-fit: contains; を適用します。アスペクト比が維持された状態で正方形内に収まるようにします。あるいは、object-fit: cover; を使用します。

さらにカスタマイズと応答性を高めるには、メディア クエリを使用して、さまざまな画面サイズに基づいてグリッド レイアウトと正方形のスタイルを調整することを検討してください。

以上がCSS を使用してコンテンツを中央に配置したレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。