display: grid 기초 완전정복 – 2차원 레이아웃의 문을 열다

 

 

지금까지 Flexbox로 멋진 정렬과 반응형 레이아웃을 만들었다면,
이제는 2차원(행 + 열) 레이아웃을 더 강력하게 다룰 수 있는
CSS Grid의 차례입니다.

 

Flex가 “흐름 기반”이라면,
Grid는 “정해진 틀 기반”입니다.
그만큼 레이아웃 설계가 더 직관적이고 강력해져요!

---

 

✅ display: grid란?

.container {
  display: grid;
}

 

이 한 줄로 Grid 컨테이너가 만들어집니다.
그리고 이 안에 있는 자식 요소들은 **행(row)과 열(column)**을 기준으로 정렬됩니다.

---

 

🧩 기본 속성 정리

속성	설명
grid-template-columns	열(column) 개수 및 너비 설정
grid-template-rows	행(row) 개수 및 높이 설정
gap	셀 사이 간격 (row + column 동시에 가능)
place-items	한 줄로 정렬 설정 (align-items + justify-items)

 

---

 

🎨 예시 1 – 3열 그리드 만들기

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

 

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

 

---

 

📐 단위를 조절해볼까요?

grid-template-columns: 200px 1fr 2fr;

• 첫 번째 열은 고정 너비
• 두 번째는 남은 공간의 1
• 세 번째는 그보다 2배

→ 비율 + 고정값 조합이 가능한 게 Grid의 강점!

---

 

🌀 반복되는 열은 repeat()로 간단하게

grid-template-columns: repeat(3, 1fr);

 

→ 1fr 1fr 1fr 과 같지만 더 짧고 가독성 좋음

---

 

🧭 Flex와 Grid의 결정적 차이

비교 항목	Flexbox	Grid
레이아웃 구조	흐름 기반	격자 기반
방향성	1차원 (row or column)	2차원 (row + column)
위치 지정	순서 기반	위치 직접 지정 가능
대표 용도	정렬, 메뉴, 버튼 줄	전체 레이아웃 구성, 복잡한 배치