CSS グリッドまたはフレックスボックスを使用して、同じサイズの正方形のレスポンシブ グリッド レイアウトを作成する方法

同じサイズの正方形で構成される応答性の高いグリッド レイアウト

問題:

同じサイズの正方形で構成される応答性の高いグリッド レイアウトを考案する、調節可能な溝間隔を備えています。 CSS グリッドとフレックスボックスの両方のアプローチを検討してください。

解決策:

パディング付き CSS グリッド トリック:

「パディング」を利用する-bottom」は正方形の比率を強制するトリックです。希望する正方形のアスペクト比 (100% など) に対応するパーセンテージのパディングボトムを持つ疑似要素を追加します。これは、正方形のコンテナの固定高さをシミュレートします。

.square {
  position: relative;
  ...
  padding-bottom: 100%;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

絶対位置指定のフレックスボックス:

擬似要素を含む Flexbox レイアウトを採用します。疑似要素の高さを正方形のアスペクト比 (例: 100%) に設定し、コンテンツを正方形のコンテナ内に絶対に配置します。

.square {
  position: relative;
  ...
  flex-grow: 0;
}

.square::before {
  content: '';
  display: block;
  height: 100%;
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

Gutter Spacing:

どちらの方法でも、正方形の要素にマージンまたはパディングを適用して作成します。

注: アスペクト比を維持するために、コンテンツが正方形内に絶対に配置されていることを確認してください。

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