CSS グリッドを使用して、同じサイズの正方形を含むレスポンシブな 4 列グリッド レイアウトを作成する方法

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

各行に 4 つの正方形が含まれる、正方形で構成されるグリッド レイアウトを作成したいと考えています。これらの正方形は画面サイズが変わっても変形せず、常に同じ幅と高さを維持します（固定値は望ましくありません）。 CSSグリッドが必要です。その方法は次のとおりです:

CSS を使用すると、疑似要素によって常に 1:1 のアスペクト比を維持したり、新しいプロパティのアスペクト比を使用したりできます。例:

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