CSS グリッドとフレックスボックスを使用して、高さが等しい正方形のレスポンシブ グリッド レイアウトを作成するにはどうすればよいですか?

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

今日のデジタル環境では、さまざまなデバイス間でシームレスなユーザー エクスペリエンスを確保するためにレスポンシブ デザインが重要です。レスポンシブ レイアウトを作成するときに遭遇する一般的な課題の 1 つは、同じ高さの正方形のグリッドが必要であることです。この質問は、CSS グリッドとフレックスボックスを使用してこれを実現することに焦点を当てています。

CSS グリッドのアプローチ

CSS グリッドを使用するには、次の手順をお勧めします。

1. display: Grid.
2. を使用してグリッド列を指定するグリッド コンテナーGrid-template-columns.
3. 応答性を高めるために、メディア クエリを定義して、利用可能なスペースに基づいて列の数を調整します。

例:

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

Flexbox アプローチ

もう 1 つのオプションは、使用することですFlexbox:

1. display: flex を使用してフレックス コンテナを設定します。
2. 正方形を水平に配置するには、フレックス方向を row に設定します。
3. 同じ高さを実現するには、padding-bottomを使用しますトリック。

例:

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

.square {
    flex-basis: 0;
    flex-grow: 1;
    padding-bottom: 100%;
}

正方形間の溝

正方形の間に溝を作成するには、マージンを使用します:

.square {
    margin: 5px;
}

結論

CSS グリッドとフレックスボックスの両方を使用してレスポンシブ グリッドを作成できます同じ高さの正方形で。 CSS Grid はより高度な機能を提供しますが、この特定の使用例では Flexbox の方が実装が簡単です。 Flexbox レイアウトで同じ高さを確保するために、padding-bottom トリックが一般的に使用されます。

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