CSS Grid는 웹 페이지의 반응형 레이아웃을 만드는 데 매우 유용한 도구입니다. 이를 활용하면 간결하고 유연한 레이아웃을 구성할 수 있습니다. 이번 포스트에서는 몇 가지 반응형 레이아웃 디자인 패턴을 살펴보겠습니다.

1. 그리드 템플릿 사용하기

CSS Grid의 핵심 기능 중 하나는 그리드 템플릿을 사용하는 것입니다. 그리드 템플릿은 그리드 컨테이너 내부의 열과 행을 정의하는 데 사용됩니다. 예를 들어, 다음과 같이 그리드 컨테이너에 ‘grid-template-columns’과 ‘grid-template-rows’를 설정할 수 있습니다:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

위의 코드에서는 그리드 컨테이너의 열을 세 개로 나누고, 행의 높이는 내용에 맞게 자동으로 조정되도록 설정했습니다.

2. 미디어 쿼리를 활용한 반응형 레이아웃

CSS Grid를 사용하여 반응형 디자인을 구현할 때, 미디어 쿼리를 사용하여 다양한 화면 크기에 따라 레이아웃을 변경할 수 있습니다. 예를 들어, 다음과 같이 미디어 쿼리를 사용하여 네 개의 열이 있는 그리드를 반응형하게 조정할 수 있습니다:

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}

위의 코드에서는 화면 너비가 768px 이하일 때는 열을 두 개로, 480px 이하일 때는 열을 한 개로 설정합니다.

결론

CSS Grid는 웹 페이지의 반응형 레이아웃 디자인에 매우 유용한 기능을 제공합니다. 그리드 템플릿과 미디어 쿼리를 활용하면 다양한 화면 크기에 따라 유연하고 간단한 레이아웃을 구성할 수 있습니다. 이러한 디자인 패턴을 활용하여 웹 페이지의 사용자 경험을 향상시킬 수 있습니다.

#WebDesign #CSSGrid