CSS Grid 기초: 복잡한 2차원 레이아웃도 식은 죽 먹기

 

웹 디자인의 세계에서 레이아웃을 잡는 것은 언제나 큰 숙제였습니다. 과거에는 table이나 float을 이용해 어렵게 화면을 구성했지만, 이제는 CSS Grid라는 강력한 도구가 우리 곁에 있습니다.

Flexbox가 1차원(행 또는 열) 레이아웃에 최적화되어 있다면, Grid는 2차원(행과 열 모두) 레이아웃을 자유자재로 설계할 수 있게 해줍니다. 오늘은 Grid의 기초부터 실무에서 바로 쓸 수 있는 예제까지 함께 살펴보겠습니다.

1. Grid의 기본 용어 정리

Grid를 시작하기 전에 반드시 알아야 할 개념들이 있습니다.

• Grid Container (그리드 컨테이너): display: grid;를 선언한 부모 요소입니다. Grid의 전체적인 틀을 정의합니다.
• Grid Item (그리드 아이템): 컨테이너의 직계 자식 요소들입니다.
• Grid Track (그리드 트랙): 그리드의 한 줄(행) 또는 한 칸(열)을 의미합니다.
• Grid Cell (그리드 셀): 그리드의 최소 단위로, 바둑판의 한 칸과 같습니다.
• Grid Gap (그리드 간격): 셀과 셀 사이의 간격을 말합니다.

2. 기본 구조 만들기: columns와 rows

가장 먼저 할 일은 그리드의 규격을 정하는 것입니다.

.container {
  display: grid;
  /* 3개의 열을 각각 200px, 1fr, 1fr 비율로 생성 */
  grid-template-columns: 200px 1fr 1fr;
  /* 2개의 행을 100px, 200px 높이로 생성 */
  grid-template-rows: 100px 200px;
  /* 아이템 사이의 간격 */
  gap: 10px;
}

여기서 잠깐! fr 단위란? fr은 'fraction(분수)'의 약자로, 그리드 컨테이너 내에서 사용 가능한 가용 공간을 비율로 나누는 단위입니다. $1fr 2fr$이라고 쓰면 전체를 3으로 나눈 뒤 각각 1/3, 2/3만큼 공간을 차지하게 됩니다.

3. 실전 예제 1: 전형적인 웹사이트 레이아웃 (Holy Grail Layout)

상단 헤더, 왼쪽 사이드바, 중앙 메인 콘텐츠, 하단 푸터가 있는 구조를 Grid로 구현해 보겠습니다. grid-template-areas 속성을 사용하면 코드의 가독성이 획기적으로 좋아집니다.

<div class="layout">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-columns: 200px 1fr; /* 사이드바 200px, 메인은 나머지 전체 */
  grid-template-rows: auto 1fr auto; /* 헤더/푸터는 내용만큼, 메인은 나머지 전체 */
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
  gap: 5px;
}

header { grid-area: header; background: #ff7675; }
nav { grid-area: sidebar; background: #74b9ff; }
main { grid-area: main; background: #55efc4; }
footer { grid-area: footer; background: #dfe6e9; }

위의 코드처럼 영역 이름을 지정해 배치하면, 복잡한 레이아웃도 한눈에 파악할 수 있는 지도를 그리는 것과 같습니다.

4. 실전 예제 2: 반응형 이미지 갤러리 (Auto-fill & Minmax)

미디어 쿼리(@media)를 일일이 작성하지 않고도 반응형 레이아웃을 만들 수 있는 기능이 Grid의 진정한 매력입니다.

.gallery {
  display: grid;
  /* 최소 250px를 보장하되, 
     공간이 남으면 자동으로 칸을 채워줌(1fr) 
  */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  height: 200px;
  background-color: #eee;
  border-radius: 8px;
}

이 코드를 사용하면 화면 너비가 좁아지면 칸 수가 줄어들고, 넓어지면 자동으로 늘어나는 유연한 갤러리를 완성할 수 있습니다.

5. 아이템 배치 조절하기: grid-column / grid-row

특정 아이템만 길게 늘리고 싶을 때는 어떻게 할까요?

.special-item {
  /* 1번 라인부터 3번 라인 전까지(즉, 2칸) 차지 */
  grid-column: 1 / 3;
  /* 1번 라인부터 4번 라인 전까지(즉, 3칸) 차지 */
  grid-row: 1 / 4;
}

라인 번호는 바둑판의 선을 기준으로 매겨집니다. 3개의 칸이 있다면 라인은 총 4개가 됩니다.

요약 및 팁

1. 단순 배치는 Flexbox, 구조적 설계는 Grid: 한 방향 정렬은 Flex가 편하지만, 전체적인 판을 짤 때는 Grid가 압도적입니다.
2. 크롬 개발자 도구 활용: 브라우저 개발자 도구(F12)에서 Grid 요소를 클릭하면 가상의 라인 번호를 눈으로 확인할 수 있어 수정이 훨씬 쉬워집니다.
3. Repeat 함수 활용: grid-template-columns: repeat(3, 1fr); 처럼 반복되는 패턴을 짧게 줄여 쓰세요.

이제 복잡한 목업 이미지 앞에서도 당황하지 마세요. CSS Grid만 있다면 어떤 레이아웃이든 질서 정연하게 배치할 수 있습니다.