等しいサイズの正方形のレスポンシブ CSS グリッド レイアウトを作成するにはどうすればよいですか?

CSS グリッド正方形レイアウト

この質問では、正方形で構成された CSS グリッド レイアウトの作成の複雑さを探ります。各正方形はアスペクト比を保持します。画面のサイズ変更中。

レイアウト

このレイアウトを実現するには、次の CSS コードを検討してください:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}
.container div {
  background-color: red;
  aspect-ratio: 1;
}

コードの理解

• display: Grid;: コンテナのグリッド レイアウトをアクティブ化します。 element.
• grid-template-columns: 1fr 1fr 1fr 1fr;: 同じ幅の 4 つの列を持つグリッドを定義します (1fr = 使用可能なスペースの 1 分の 1)。
• grid-gap: 5px ;: グリッド セル間に 5 ピクセルのギャップを設定します。
• background-color: red;: グリッド セルを赤色の背景でスタイルします。
• aspect-ratio: 1;: 各セルのアスペクト比を 1:1 に維持します。このプロパティにより、画面サイズに関係なく正方形が正方形のままになります。

このアプローチにより、サイズ変更中にアスペクト比を維持した正方形のグリッドを作成でき、柔軟で応答性の高いレイアウトが提供されます。

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