CSS Grid

2차원 레이아웃의 완벽한 해법

​웹사이트 레이아웃을 만들 때 Flexbox만으로도 충분히 많은 문제를 해결할 수 있습니다. 하지만 더 복잡한 레이아웃을 구현해야 할 때는 CSS Grid가 강력한 무기가 됩니다. Grid는 Flexbox와 달리 2차원 레이아웃(행과 열 동시 제어) 을 지원하기 때문에, 페이지 전체 구조를 설계할 때 특히 유용합니다.

Grid의 기본 개념

Grid는 부모 요소에 display: grid;를 선언하면서 시작합니다. 부모는 grid 컨테이너가 되고, 자식은 grid 아이템이 됩니다. 그 후 grid-template-columns, grid-template-rows 속성을 이용하여 레이아웃을 정의할 수 있습니다.

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

위 코드는 좌측 사이드바(200px), 본문(자동 확장), 우측 사이드바(200px), 상단 헤더(100px), 본문(자동), 하단 푸터(50px)를 손쉽게 구성합니다. 과거에는 이런 구조를 만들기 위해 float나 복잡한 div 중첩을 사용해야 했지만, Grid는 몇 줄의 코드로 해결합니다.

Flexbox와의 차이점

• Flexbox: 한 방향(가로 또는 세로)으로 정렬하는 1차원 레이아웃

• Grid: 행과 열을 동시에 다루는 2차원 레이아웃

즉, Flexbox는 콘텐츠 중심, Grid는 레이아웃 중심이라고 볼 수 있습니다. 실무에서는 두 가지를 함께 쓰는 경우가 많습니다.

반응형에 강력한 Grid

Grid는 repeat(), minmax(), auto-fit 같은 기능을 통해 반응형 디자인을 구현하기 쉽습니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

위 코드는 화면 크기에 따라 아이템 개수를 자동으로 조정합니다. 작은 화면에서는 1~2열, 큰 화면에서는 여러 열로 자연스럽게 배치됩니다.

장점

1. 복잡한 레이아웃을 단순하게 정의

2. 반응형 웹에 최적화된 속성 제공

3. 유지보수가 쉽고 직관적인 코드

Flexbox가 웹 개발자에게 자유를 줬다면, CSS Grid는 웹 레이아웃 설계의 새로운 차원을 열어주었습니다. 대시보드, 잡지형 웹사이트, 쇼핑몰 상품 배치 같은 복잡한 페이지는 Grid 없이는 구현이 어렵습니다. 웹 개발을 한다면 Flexbox와 Grid를 모두 익혀 상황에 맞게 활용하는 것이 최선의 선택입니다.