レスポンシブ レイアウトをマスターする: CSS グリッドを使用して複雑なデザインを実現する

レスポンシブなレイアウトの作成は、Web 開発者にとって共通の課題です。このブログでは、さまざまな CSS テクニックを使用して特定のレスポンシブ デザインを実現する方法を検討し、この特定のレイアウトに CSS グリッドが最適なアプローチである理由に焦点を当てます。

挑戦

次のようなレイアウトを作成する必要があります。

デスクトップビュー:

• DIV 1 と DIV 3 は左側に垂直にスタックされ、それぞれ左列の 50% を占めます。
• DIV 2 は右列の高さ全体を占めます。

モバイルビュー:

• 3 つの div はすべて垂直方向にスタックされます。

Flexbox が不十分な理由

Flexbox は 1 次元レイアウトには優れていますが、私たちのような複雑な 2 次元レイアウトには苦労します。その理由は次のとおりです:

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

フレックスボックスの問題

このフレックスボックス設定では:

• DIV 2 は、DIV 1 と DIV 3 を合わせた高さに合わせて高さを自動的に調整できません。
• フレックスボックスは、複雑な 2 次元の配置ではなく、主に 1 次元のレイアウト (行または列) 用です。

CSS グリッド ソリューション

CSS グリッドは 2 次元レイアウトの作成に優れているため、この課題に最適です。

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

説明

グリッドレイアウト:

• 2 列 2 行のグリッドを定義します。
• DIV 1 を最初の列と最初の行に配置します。
• DIV 2 を 2 列目に配置し、2 行にまたがります。
• DIV 3 を最初の列と 2 行目に配置します。

レスポンシブデザイン:

• 画面が 768 ピクセル以下の場合、レイアウトはフレックスに切り替わり、項目が垂直に積み重なっていきます。

結論

Flexbox は、より単純な 1 次元のレイアウトに最適ですが、CSS グリッドは、より複雑な 2 次元のデザインに必要な機能と柔軟性を提供します。 CSS グリッドを使用すると、最小限のコードと最大限の制御で、目的の応答性の高いレイアウトを簡単に実現できます。

この例を独自のプロジェクトに合わせて自由に調整し、レスポンシブ レイアウトに CSS グリッドを使用する利点を楽しんでください。

以上がレスポンシブ レイアウトをマスターする: CSS グリッドを使用して複雑なデザインを実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。