CSS グリッドとフレックスボックスを使用してグリッド レイアウトでレスポンシブな正方形を構築する方法

レスポンシブな正方形を含むグリッド レイアウトを作成する方法

この記事では、CSS を使用してレスポンシブな正方形を含むグリッド レイアウトを作成する方法について説明します。

CSS グリッドのアプローチ

CSS グリッドの場合、次の組み合わせを使用できます。レスポンシブな正方形を作成するための Grid-template-columns と padding-bottom のトリック。 padding-bottom トリックは、正方形のパディングにパーセンテージ値を割り当て、そのアスペクト比を効果的に 1:1 に設定します。

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

.square {
    padding-bottom: 100%;
}

Flexbox アプローチ

Flexbox を使用すると、同様のパディングを使用できます。 -ボトム レスポンシブな正方形を作成するテクニック。フレックス項目のパディングにパーセンテージ値を割り当てることで、アスペクト比が等しくなるように設定できます。

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

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    padding-bottom: 100%;
}

どちらの方法でも、パディングのパーセント値を確実にするには疑似要素または追加のラッパーを使用する必要があることに注意してください。フレックス項目やグリッド項目ではなく、正方形自体に適用されます。

メディア クエリの使用応答性

小さい画面でグリッド レイアウトを 1 列に折りたたむには、メディア クエリを使用できます。

@media (max-width: 768px) {
    .square-container {
        grid-template-columns: 100%;
        flex-direction: column;
    }
}

結論

これらのテクニックを組み合わせることで、さまざまな画面サイズやデバイスの方向にわたって一貫したアスペクト比を維持する、応答性の高い正方形のグリッド レイアウト。

以上がCSS グリッドとフレックスボックスを使用してグリッド レイアウトでレスポンシブな正方形を構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。