CSS を使用してレスポンシブな正方形のグリッドを作成する方法

レスポンシブな正方形グリッドの作成

はじめに:
レスポンシブな正方形を備えたレイアウトの作成は、多くの場合、困難な作業になることがあります。ただし、CSS テクニックを使用すると、この効果を実現することが可能です。

レスポンシブ正方形レイアウト:
提供された例は、垂直方向と水平方向に配置されたコンテンツを含む正方形のグリッドを示しています。このレイアウトを実装するには、「グリッド」プロパティと「アスペクト比」プロパティを利用します。

CSS 実装:
以下の CSS コードは、グリッドを確立し、アスペクトを設定します。正方形の形状を維持するための各正方形の比率:

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

.square {
  aspect-ratio: 1 / 1;
}

内容配置:
各正方形内のコンテンツを配置するには、「flex」プロパティと「align-items」プロパティを使用します:

.square {
  display: flex;
  align-items: center;
}

柔軟なコンテンツ処理:
四角形には、テキスト、画像、リストなど、さまざまな種類のコンテンツを含めることができます。コンテンツが確実に中央に配置されるように、適切なパディングを適用し、画像が正方形内に含まれるようにします:

.square {
  padding: 5%;
}

.square img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

全幅画像:
全幅表示の正方形の場合幅の画像の場合は、パディングを削除し、正方形をカバーするように object-fit プロパティを調整します。完全に:

.square.fullImg {
  padding: 0;
}

.square.fullImg img {
  object-fit: cover;
}

動的サイズ設定:
「grid-template-columns」プロパティを「repeat(3, 1fr)」として定義すると、正方形の幅が動的に調整されます。利用可能なスペースに基づいて、さまざまな画面サイズで応答性の高いレイアウトを維持します。

以上がCSS を使用してレスポンシブな正方形のグリッドを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。