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;
}

アスペクト比プロパティにより、正方形の幅と高さが常に 1:1 の比率に保たれ、正方形が維持されます。形。

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