웹 앱을 개발하다보면 반응형 레이아웃을 다루는 것이 중요합니다. CSS Grid를 활용한 커스텀 그리드 시스템은 이러한 반응형 레이아웃을 손쉽게 구현할 수 있는 방법입니다. 이번 게시물에서는 CSS Grid를 사용하여 웹 앱의 커스텀 그리드 시스템을 개발하는 방법에 대해 알아보겠습니다.

1. 그리드 컨테이너 생성하기

먼저, 그리드 시스템을 구현하기 위해 그리드 컨테이너를 생성해야 합니다. 다음 코드를 사용하여 그리드 컨테이너를 생성할 수 있습니다.

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

위의 코드에서 container 클래스는 그리드 컨테이너의 역할을 담당합니다. display: grid; 속성을 사용하여 그리드 레이아웃을 생성하고, grid-template-columns 속성을 사용하여 12개의 컬럼을 생성합니다. repeat(12, 1fr)은 12개의 컬럼을 동일한 너비로 설정하는 것을 의미합니다. gap 속성을 사용하여 각 항목 사이의 간격을 설정할 수 있습니다.

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

그리드 컨테이너가 생성되었다면, 그리드 아이템을 배치할 수 있습니다. 각 그리드 아이템은 그리드 컨테이너 내에서 위치를 설정할 수 있습니다. 예를 들어, 다음과 같은 코드를 사용하여 그리드 아이템을 배치할 수 있습니다.

.item {
  grid-column: span 6;
  grid-row: span 2;
}

위의 코드에서 item 클래스는 그리드 아이템을 의미합니다. grid-column 속성을 사용하여 아이템이 차지하는 컬럼의 범위를 설정합니다. span 6은 아이템이 6개의 컬럼을 차지함을 의미합니다. 마찬가지로 grid-row 속성을 사용하여 아이템이 차지하는 로우의 범위를 설정합니다. span 2는 아이템이 2개의 로우를 차지함을 의미합니다.

3. 미디어 쿼리를 사용한 반응형 그리드

커스텀 그리드 시스템을 개발할 때는 미디어 쿼리를 사용하여 반응형 레이아웃을 지원해야 합니다. 예를 들어, 다음과 같이 코드를 작성하여 스크린 사이즈에 따라 그리드 레이아웃이 변경되도록 할 수 있습니다.

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

위의 코드에서는 스크린 사이즈가 768px 이하일 때, container 클래스의 그리드 레이아웃을 6개의 컬럼으로 변경합니다.

마무리

CSS Grid를 활용한 커스텀 그리드 시스템은 웹 앱의 반응형 레이아웃을 구현하는 데 유용한 도구입니다. 그리드 컨테이너를 생성하고 그리드 아이템을 배치함으로써 원하는 레이아웃을 손쉽게 구현할 수 있습니다. 또한 미디어 쿼리를 활용하여 반응형 그리드를 구현할 수도 있습니다.

#webdevelopment #cssgrid