미디어 쿼리 없이: 유동적인 3열 데스크톱을 1열 모바일 레이아웃으로 구현

전통적인 미디어 쿼리는 적응하는 데 중요한 역할을 합니다. 다양한 화면 크기에 따른 웹사이트 레이아웃. 그러나 정말 유연하고 반응이 빠른 디자인을 만들기 위해 미디어 쿼리가 필요 없는 대체 솔루션을 모색하려는 욕구가 있습니다.

데스크톱에서 3열 레이아웃을 사용하는 웹사이트를 생각해 보세요.

   |  |  |
---| ---| ---|
| 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() 함수는 지정된 수의 열을 생성하고, 클램프()는 뷰포트가 500px 미만으로 줄어들 때 최소 1개의 열을 보장합니다.

Flexbox 및 음수 여백

.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 */
   }
}

이 접근 방식을 사용하면 큰 화면에서는 항목이 나란히 정렬되지만 좁은 화면에서는 수직으로 쌓이게 됩니다. 음수 여백은 처음에 겹침을 생성하며, 이는 작은 화면에서 이를 제거하여 수정됩니다.

결론

그리드, 클램프, Flexbox 및 음수 여백을 활용하면 가능합니다. 여러 열과 단일 열 사이에 원활하게 적용되는 유동적인 레이아웃을 생성하여 기본 레이아웃 변경에 대한 미디어 쿼리가 필요하지 않습니다.