CSS Grid는 웹 개발자들이 웹 페이지의 그리드 레이아웃을 쉽게 구현할 수 있도록 도와주는 강력한 CSS 기술입니다. 그리드 레이아웃은 화면을 그리드 형태로 분할하여 요소들을 정렬하고 배치하는 것을 말합니다. 반응형 그리드 레이아웃을 구현하면 웹 페이지가 다양한 화면 크기에 대응할 수 있어 사용자 경험을 향상시킬 수 있습니다.

1. CSS Grid 기본 설정

먼저 CSS Grid를 사용하기 위해 컨테이너 요소에 display: grid;를 설정해야 합니다. 이렇게 설정하면 해당 요소는 그리드 컨테이너가 됩니다.

.container {
  display: grid;
}

2. 그리드 템플릿 정의

다음으로 그리드 템플릿을 정의해야 합니다. 그리드 템플릿은 그리드 아이템들이 배치될 행과 열의 크기와 개수를 정의하는 것입니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3개의 열로 구성 */
  grid-template-rows: 100px auto 100px; /* 첫 번째 행은 100px, 두 번째 행은 자동으로 크기를 조정, 세 번째 행은 100px */
}

위의 예제에서는 3개의 열과 3개의 행으로 이루어진 그리드를 생성하였습니다.

3. 그리드 아이템 배치

이제 그리드 아이템들을 그리드에 배치해보겠습니다. 각각의 그리드 아이템은 그리드 템플릿에 정의된 열과 행에 맞게 배치됩니다.

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

.item {
  grid-column: 1 / 3; /* 첫 번째 열과 두 번째 열에 걸쳐 배치 */
  grid-row: 2; /* 두 번째 행에 배치 */
}

위의 예제에서는 클래스가 “item”인 그리드 아이템을 첫 번째 열과 두 번째 열에 걸쳐 배치하고, 두 번째 행에 배치하였습니다.

4. 반응형 그리드 레이아웃

반응형 그리드 레이아웃을 구현하기 위해서는 미디어 쿼리(Media Query)를 사용하여 화면 크기에 따라 그리드 템플릿과 그리드 아이템의 배치를 조정할 수 있습니다.

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

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

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 1개의 열로 구성 */
    grid-template-rows: 100px auto auto 100px; /* 네 번째 행을 추가 */
  }

  .item {
    grid-column: 1; /* 첫 번째 열에 배치 */
    grid-row: 3; /* 세 번째 행에 배치 */
  }
}

위의 예제에서는 화면 크기가 768px 이하인 경우, 그리드의 열을 1개로 조정하고, 행에 추가적으로 1개의 행을 추가하여 반응형 그리드 레이아웃을 구현하였습니다.

마무리

CSS Grid를 사용하여 반응형 그리드 레이아웃을 구현하는 방법에 대해 알아보았습니다. 이를 활용하면 웹 페이지를 다양한 화면 크기에 맞춰 적절하게 레이아웃을 배치할 수 있습니다. CSS Grid를 사용하면 복잡한 레이아웃도 간편하게 구현할 수 있으므로, 웹 개발에서 적극적으로 활용해보시기 바랍니다.

해시태그

#CSS #반응형 #그리드레이아웃