CSS Grid를 활용한 미니멀 반응형 레이아웃 설계

반응형 웹 디자인을 구축할 때 모든 단말기 크기별로 수많은 미디어 쿼리를 선언하는 방식은 스타일 코드를 비대하고 복잡하게 만듭니다. CSS Grid의 특성을 이용하면 단 몇 줄로 유연한 반응형 레이아웃을 완성할 수 있습니다.

auto-fit과 minmax의 마법

가장 흔히 사용하는 강력한 패턴은 다음과 같습니다.

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

이 코드는 미디어 쿼리 하나 없이도 화면 폭에 따라 컬럼 수를 자동으로 1열, 2열, 3열로 조절해 줍니다. 280px이라는 최소 너비를 확보하면서 남는 공간은 균등하게 나누어 채우기 때문입니다. 이러한 방식을 활용하여 미니멀한 레이아웃을 보다 간결하게 관리할 수 있습니다.