CSS Grid Layout으로 복잡한 레이아웃 구현하기

문제 상황

관리자 대시보드 화면을 구현하면서 Flexbox만으로 복잡한 그리드 레이아웃을 만드는 데 어려움을 겪었다. 특히 헤더, 사이드바, 메인 콘텐츠 영역이 복잡하게 얽혀있는 구조에서 반응형 처리가 까다로웠다.

기존에는 중첩된 Flexbox와 미디어쿼리로 해결했지만, 코드가 지나치게 복잡해지고 유지보수가 어려워졌다.

CSS Grid 도입

CSS Grid Layout이 올해 3월 주요 브라우저에서 지원되기 시작했다. IE11 지원이 필요했지만 autoprefixer로 -ms- prefix 처리가 가능해 도입을 결정했다.

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  height: 100vh;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.main {
  grid-area: main;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
  
  .sidebar {
    display: none;
  }
}

결과

기존 150줄 정도의 CSS가 80줄로 줄어들었고, 레이아웃 의도가 명확하게 드러났다. grid-template-areas로 시각적으로 레이아웃을 파악할 수 있어 협업 시 커뮤니케이션도 수월해졌다.

IE11에서도 정상 동작했지만, 일부 복잡한 케이스에서는 fallback CSS를 추가로 작성해야 했다. 당분간은 Grid와 Flexbox를 적재적소에 혼용하는 방식으로 가려고 한다.