メディア クエリなし: 流動的な 3 列デスクトップから 1 列モバイル レイアウトを実現

従来のメディア クエリは、モバイル レイアウトの適応において重要な役割を果たしますウェブサイトのレイアウトをさまざまな画面サイズに対応させます。ただし、真に流動的で応答性の高いデザインの作成を追求する中で、メディア クエリの必要性を排除する代替ソリューションを検討したいという要望があります。

デスクトップ上の 3 列レイアウトの Web サイトを考えてみましょう:

   |  |  |
---| ---| ---|
| 1 | 2 | 3 |

ただし、モバイルではレイアウトは単一列に変換されます:

|
---|
| 1 |
| 2 |
| 3 |

これを動的に実現するには、CSS の強力な機能が役に立ちます。

グリッドとクランプ

.grid-wrapper {
   display: grid;
   gap: 15px;
   grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

repeat() 関数は指定された数の列を作成し、ビューポートが 500 ピクセル未満に縮小する場合、clamp() は最小 1 列を確保します。

フレックスボックスと負のマージン

.flex-container {
   display: flex;
   flex-direction: row;
}

.flex-item {
   width: 33%; /* initial width */
   margin-right: -15px; /* negative margin to facilitate overlapping */
   background-color: red;
}

/* Breakpoint rule for smaller screens */
@media screen and (max-width: 500px) {
   .flex-item {
      margin-right: 0; /* remove negative margin on mobile */
   }
}

このアプローチにより、大きな画面では項目が横に並べられますが、狭い画面では垂直に積み重ねられます。最初は負のマージンによってオーバーラップが発生しますが、小さい画面ではオーバーラップを削除することで修正されます。

結論

グリッド、クランプ、フレックスボックス、および負のマージンを活用することで、次のことが可能になります。複数の列と単一の列の間でシームレスに適応する流動的なレイアウトを作成し、基本的なレイアウト変更のためのメディア クエリの必要性を排除します。