[CSS] Grid

Jina·2025년 10월 20일

✅ Grid란?

CSS Grid는 웹 레이아웃을 2차원(행+열)으로 구조화할 수 있는 강력한 레이아웃 시스템이다.
Flexbox가 주로 1차원(가로 혹은 세로 중 하나) 정렬에 특화되어 있다면,
Grid는 복잡한 레이아웃을 보다 직관적으로 구현할 수 있다.

🏗️ 기본 구조

.container {
  display: grid;
}

grid를 사용하려면 먼저 부모 요소에 display: grid만 선언하면 된다.

📏 행(row)과 열(column) 정의하기

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

grid-template-columns: 열(column)의 너비를 정의
grid-template-rows: 행(row)의 높이를 정의
fr: 남은 공간을 비율로 나눔 (flexible unit)

✅ 예: 3열 레이아웃 만들기

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

repeat(3, 1fr) = 1fr 1fr 1fr
gap: 그리드 아이템 간의 간격

📦 그리드 아이템 위치 조정하기

.item1 {
  grid-column: 1 / 3; /* 1번 열부터 2번 열까지 차지 */
  grid-row: 1 / 2;
}

grid-column: 시작 /끝
grid-row: 시작 / 끝
👉 숫자는 라인 번호(line number)를 의미한다.

🧠 자동 채우기: auto-fill & auto-fit

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

키워드	역할
`auto-fill`	가능한 한 많은 칸을 채웁니다.
`auto-fit`	남는 공간을 늘려서 빈 칸을 없앱니다.
`minmax(min, max)`	최소/최대 크기를 조정합니다.

👉 반응형 카드 레이아웃에 자주 쓰이는 패턴이다.

💡 Flex vs Grid, 언제 뭘 써야 할까?

상황	추천
가로나 세로 한 줄 기준으로 배열	✅ Flex
헤더/사이드바/본문/푸터 등 2차원 구조	✅ Grid
섹션 간의 관계가 명확한 페이지 구조	✅ Grid
아이템 간 정렬에 집중하는 경우	✅ Flex

📍 실전 예제: 간단한 페이지 레이아웃

.container {
  display: grid;
  width: 900px;
  height: 550px;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 100px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }