📐 07. CSS Grid: '2차원 레이아웃의 설계자'

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 12분(전체) / 핵심 파트만: 6분

🗺️ 이 문서의 흐름
[행과 열의 정의] → [grid-template-areas의 시각화] → [fr 단위와 반응형 auto-fit]

🎯 이 문서를 다 읽으면 할 수 있는 것

• 페이지 전체의 골격(대시보드, 뉴스 레이아웃 등)을 Grid로 설계합니다.
• grid-template-areas를 사용해 코드만 보고도 레이아웃을 머릿속에 그립니다.
• 미디어 쿼리 없이도 화면 폭에 따라 아이템 개수가 변하는 마법을 부립니다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 님! 이번 사이트 메인 페이지가 거의 잡지처럼 복잡해요. 헤더 밑에 왼쪽 사이드바, 중간 본문, 오른쪽 광고... 이거 다 Flexbox로 중첩해서 만들려니까 코드가 스파게티처럼 꼬이고 있어요! 🍝"
• 🦁 영호 ( 리드 ): "영철 님, Flexbox는 '한 줄씩' 정렬하는 데는 최고지만, 이런 '면(2차원)' 전체를 설계할 때는 한계가 있죠. 이제 판을 짜는 설계자, CSS Grid가 등판할 차례입니다."

🤔 왜 알아야 하는가

Flexbox가 '정렬' 을 위한 것이라면, Grid는 '구조' 를 위한 것입니다. 우리가 살면서 보는 대부분의 복잡한 웹 서비스(네이버, 유튜브, 대시보드 관리자 페이지 등)는 Grid를 통해 그 뼈대를 잡습니다.

신입 개발자들이 가장 어려워하는 것이 "이 레이아웃을 위해 div를 얼마나 더 감싸야 하지?"라는 고민입니다. Grid를 사용하면 불필요한 래퍼(Wrapper) 태그 없이도 아주 간단하게 영역을 나눌 수 있습니다. 5년차 이상의 시니어는 Grid를 통해 HTML 구조는 깔끔하게 유지하면서도 화려한 배치를 자유자재로 변경합니다.

🏗️ 1. 판 짜기: Container와 Track

Grid는 부모(Container)에서 행(Rows)과 열(Columns)을 미리 정의하고 시작합니다.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 200px 고정, 나머지는 1:1 비율 */
  grid-template-rows: auto 1fr auto;   /* Header, Body, Footer */
  gap: 15px;
}

• fr (Fraction): '분수'라는 뜻으로, 남는 공간을 비율로 나눠 갖는 Grid 전용 단위입니다. (Flex-grow와 비슷하죠!)

🎨 2. 마법의 주문: grid-template-areas

이 속성은 CSS Grid의 꽃입니다. 레이아웃을 텍스트로 **'그림'**을 그리듯 정의할 수 있습니다.

/* 🦁 영호: 이렇게 쓰면 동료 개발자가 나중에 봐도 바로 이해합니다. */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}
 
.header { grid-area: header; }
.main   { grid-area: main; }
/* ... 나머지 연결 */

🐣 영철: "와... 이거 진짜 대박인데요? 코드가 그냥 도면 그 자체예요!"

📱 3. 미디어 쿼리 없는 반응형: auto-fit & minmax

Grid의 진짜 강력한 점은 화면 폭에 따라 아이템 개수를 알아서 조절하는 지능입니다.

/* 🦁 영서 리드: 미디어 쿼리 10줄 짤 거 한 줄로 끝내는 비기입니다. */
.item-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

• 의미: "최소 250px은 보장하되, 자리 남으면 똑같이 나눠 가져. 자리 부족하면 알아서 다음 줄로 내려가!"

📝 마무리 퀴즈

Q1. grid-template-columns: 1fr 2fr; 설정 시, 전체 너비가 300px이라면 첫 번째 열의 실제 너비는 얼마일까요?

✅ 정답: 100px

💡 상세 해설:

• 원리 설명: fr은 남은 공간을 비율로 나누는 단위입니다. 1fr 2fr은 전체를 1:2 비율로 쪼갠다는 뜻이에요. 300px ÷ (1+2) = 100px이 1fr의 몫이므로, 첫 번째 열은 1 × 100 = 100px, 두 번째 열은 2 × 100 = 200px이 됩니다.
• 오답 피드백: "영철 님, fr은 'fraction(분수)'의 약자예요. px처럼 고정된 값이 아니라 형제들과 나눠 갖는 비율이라는 걸 기억하세요!"
• 📌 핵심 기억법: "fr = 피자 조각 수. 1fr 2fr이면 총 3조각, 내 몫은 1조각!"

Q2. grid-template-areas에서 특정 칸을 빈 공간으로 두고 싶을 때 사용하는 기호는 무엇인가요?

1. #
2. . (마침표)
3. _
4. null

✅ 정답: 2. . (마침표)

💡 상세 해설:

• 원리 설명: grid-template-areas에서 .(마침표)은 "이 칸은 비워둬"라는 예약 기호입니다. 여러 개를 연속으로 쓰면(.. ..) 빈 칸이 여러 개 이어지는 효과를 낼 수도 있어요.
• 오답 피드백: "영철 님, #이나 _, null은 Grid에서 특별한 의미가 없어요. 오직 .만이 '빈 영역'을 뜻하는 공식 기호입니다!"
• 📌 핵심 기억법: "설계 도면에 마침표(.)를 찍으면, 그 자리는 '공터'가 된다!"

Q3. [영철이의 테스트 타임: 아키텍처 설계]
영숙 디자이너 님이 "모바일에서는 헤더-사이드바-본문 순서로 나오는데, 데스크톱에서는 헤더-본문-사이드바 순서로 위치를 바꿔주세요!"라고 하십니다. HTML 구조를 바꾸지 않고 오직 CSS Grid만으로 이 배치를 가장 쉽게 바꾸는 방법은 무엇일까요?

✅ 정답: 미디어 쿼리 안에서 grid-template-areas의 구조만 새로 정의한다.

💡 상세 해설:

• 원리 설명: Grid는 HTML 상의 순서와 관계없이 grid-area로 정의된 영역의 위치를 마음대로 재배치할 수 있습니다.
• 오답 피드백: "영철 님, 자바스크립트로 DOM을 갈아끼우거나 order를 복잡하게 쓰는 건 하책입니다. Grid Areas라는 도면을 새로 그리는 게 정석이에요."
• 📌 핵심 기억법: "도면(Areas)만 바꾸면 이사 끝!"

🐣 영철이의 퇴근 일기

오늘 CSS Grid를 배우고 나니, 그동안 Flexbox로 아등바등했던 게 마치 포크로 국을 먹으려 했던 것 같다.
grid-template-areas는 정말 충격적이었다. CSS 코드 안에 레이아웃 모양이 그대로 있다니!

💡 "Grid는 단순한 배치가 아니라 영역의 법적인 경계를 긋는 건축이다. 완벽한 골격이 완벽한 UX를 만든다."

특히 repeat(auto-fit, ...) 이걸 보면서 "와, 이거면 미디어 쿼리 반은 줄일 수 있겠는데?" 싶었다.
영수 님이 주신 복잡한 관리자 대시보드 시안, 예전 같으면 한숨부터 나왔겠지만 이젠 Grid 도면부터 그려보고 싶다.
내일은 요소들의 '계급 사회'인 z-index랑 Stacking Context를 배운다는데, 벌써 머리가 지끈거리지만 영호 님이 계시니까 든든하다! 📐

🔗 더 알아보기

• MDN: CSS Grid 가이드
• Grid Garden (게임으로 배우기)