CSS Grid는 웹 디자인에서 레이아웃을 구성하는 강력한 기술로 폭넓게 사용되고 있습니다. 그러나 대부분의 예제와 튜토리얼은 균형있는 대칭 레이아웃에 중점을 둡니다. 이번 포스팅에서는 CSS Grid를 사용하여 비대칭 레이아웃을 구성하는 방법에 대해 알아보겠습니다.

1. 그리드 열과 행 정의하기

먼저, CSS Grid를 사용하여 그리드의 열과 행을 정의해야 합니다. 이를 위해서는 grid-template-columns와 grid-template-rows를 사용하여 그리드의 크기와 배치를 설정합니다. 이때, 비대칭 레이아웃을 위해 열과 행의 크기를 다르게 설정할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(3, 1fr);
}

위의 예시는 열을 1등분과 2등분으로, 행을 3개로 구성하는 그리드를 정의한 것입니다. 이때, 1fr은 남은 공간을 차지하는 비율적인 단위를 뜻합니다.

2. 그리드 아이템 배치하기

그리드 아이템을 실제로 그리드에 배치하기 위해 grid-column과 grid-row를 사용할 수 있습니다. 이를 통해 각 아이템을 특정 열과 행에 배치할 수 있습니다.

.item {
  grid-column: 1 / 2;
  grid-row: 2 / 4;
}

위의 예시는 .item 클래스를 가진 아이템을 첫 번째 열의 두 번째 행에서 네 번째 행까지 배치하는 것을 나타냅니다.

3. 반응형 디자인 적용하기

CSS Grid는 반응형 디자인에 강력한 도구입니다. 미디어 쿼리를 사용하여 화면 너비에 따라 그리드 레이아웃을 동적으로 변경할 수 있습니다.

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

  .item {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
  }
}

위의 예시는 화면의 최대 너비가 768px일 때, 그리드를 2개의 열과 3개의 행으로 변경하고, .item 클래스를 가진 아이템을 첫 번째 열의 두 번째 행에서 네 번째 행까지 배치하는 것을 나타냅니다.

이와 같이 CSS Grid를 사용하여 비대칭 레이아웃을 구성하면 웹 디자인에 다양한 유연성과 창의성을 더할 수 있습니다.

#webdesign #cssgrid