CSS のみを使用して不変の正方形要素のレスポンシブ グリッドを作成するにはどうすればよいですか?

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

このクエリの目的は、正方形要素で構成されるグリッド システムを確立することです。画面サイズの調整に関係なく、その寸法が維持されます。固定値の必要性がなくなり、CSS グリッドの実装が必須となります。

これを実現するには、疑似要素を利用して一貫した 1:1 のアスペクト比を維持する効果的な方法が 1 つあります。あるいは、以下に示すように、最新の 'aspect-ratio' プロパティを使用することもできます。

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

提供された HTML コード内では、各 'div' 要素は正方形を表します:

<div>

このアプローチを採用すると、正方形の要素がそのアスペクト比を維持し、画面のサイズが変更されたときに歪みがなくなることが保証されます。

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