CSS 그리드(flexbox를 포함한) 시스템은 웹 페이지 레이아웃을 만들 때 매우 강력한 도구입니다. 이를 사용하면 요소를 쉽게 정렬하고 레이아웃을 만들 수 있습니다. 이번 포스트에서는 CSS 그리드 시스템을 활용하는 방법을 알아보겠습니다.

1. 그리드 컨테이너 만들기

먼저, 그리드 시스템을 사용하기 위해 그리드 컨테이너를 만들어야 합니다. 이를 위해서는 아래와 같이 CSS를 사용합니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 세 개의 컬럼으로 구성된 그리드 */
  grid-gap: 20px; /* 그리드 간격 설정 */
}

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

그리드 컨테이너를 만든 후, 그 안에 요소들을 배치할 수 있습니다. 아래와 같이 CSS를 사용하여 구현할 수 있습니다.

.item {
  grid-column: span 2; /* 2개의 컬럼에 걸쳐 배치됨 */
  grid-row: 1; /* 첫 번째 행에 배치됨 */
}

3. 반응형 그리드

그리드 시스템은 반응형으로 만들 수 있습니다. 미디어 쿼리를 사용하여 화면 크기에 따라 그리드를 조정할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 두 개의 컬럼으로 구성된 그리드 */
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr; /* 세 개의 컬럼으로 변경 */
  }
}

이렇게 CSS 그리드 시스템을 활용하면 레이아웃을 더욱 쉽게 구성할 수 있습니다.

더 많은 정보는 MDN web docs에서 찾아볼 수 있습니다.