CSS グリッドとフレックスボックス: レスポンシブな正方形の作成にはどちらが最適ですか?

動的正方形を使用したレスポンシブ グリッド レイアウトの作成

各正方形の高さが同じになるように、レスポンシブな正方形を使用してグリッド レイアウトを構築することを目指します。その幅に合わせて、側溝で区切られています。これを実現するには、CSS グリッドまたはフレックスボックスの使用を検討しています。

CSS グリッド

CSS グリッドを使用すると、グリッドの列と高さを定義できます。グリッド領域に対する正方形の割合。以下に例を示します。

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 10px;
}

.square {
    height: 100%;
}

Flexbox

Flexbox では、flex-wrap プロパティを使用してレスポンシブ レイアウトを作成できます。正方形の縦横比を確実に維持するには、padding-bottom トリックを使用するか、擬似要素を作成して適切な高さを設定できます。

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid;
    box-sizing: border-box;
}

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
}

その他の考慮事項

• テキストを四角形内の中央に配置するには、次のディスプレイを使用できます。 justify-content: center; を含むプロパティおよび align-items: center;。
• 古いブラウザでは、padding-bottom トリックにより信頼性の低い結果が生じる可能性があります。
• 正方形のアスペクト比を一貫させるには、コンテンツ要素を正方形の中に完全に配置します。

以上がCSS グリッドとフレックスボックス: レスポンシブな正方形の作成にはどちらが最適ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。