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

CSS グリッドを使用した正方形グリッド レイアウトの作成

各行に 4 つの正方形を含む正方形のレイアウトの作成は、CSS を使用して実現できます。グリッド。画面のサイズを変更しても正方形の形状が維持されるようにするには、固定値の使用を避けることが重要です。

コード例

次のコードは、そのようなコードを作成する方法を示しています。レイアウト:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.container div {
  background-color: red;
  aspect-ratio: 1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

説明

• .container 要素は、表示: グリッドに設定されており、等しい 4 つの列を持つグリッド テンプレートを使用します。 width.
• grid-gap プロパティは、グリッド間に 5 ピクセルのギャップを追加します。
• .container div セレクターで表される各正方形には、赤い背景色があります。
• 最新のブラウザーでサポートされているアスペクト比プロパティは、1:1 を維持するために使用されます。各正方形のアスペクト比。画面サイズや向きに関係なく正方形のままになります。

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