[CSS] Grid 핵심 속성 & 예제 가이드

👩🏼‍💻 CSS Grid는 행(Row)과 열(Column)이라는 2차원 구조로 아이템을 배치할 수 있는 CSS의 강력한 레이아웃 시스템이다.

---

1️⃣ Grid 기본 구조

.container {
  display: grid; /* 또는 inline-grid */
}

• grid → block 요소처럼 전체 너비 차지
• inline-grid → inline 요소처럼 흐름 내에서 정렬
• 자식 요소는 명시적 설정 없이도 자동 배치됨

📁 예제: ex01_gridContainer.html

---

2️⃣ grid-template-columns / grid-template-rows

.container {
  grid-template-columns: 100px auto 1fr;
  grid-template-rows: 80px auto;
}

• 열과 행의 크기를 정의
• fr은 남은 공간을 비율로 배분

단위	의미
px	고정 크기
fr	남은 공간 비율 배분
auto	콘텐츠 크기만큼 자동 조절

📁 예제: ex01_gridContainer.html

---

3️⃣ grid-template-areas

.container {
  grid-template-areas:
    "header header"
    "nav body"
    "footer footer";
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.body { grid-area: body; }
.footer { grid-area: footer; }

• 이름 기반으로 직관적으로 배치 가능
• 구조가 시각적으로 이해됨

📁 예제: ex02_gridContainer.html

---

4️⃣ 간격 조절: gap, row-gap, column-gap

.container {
  gap: 20px; /* row + column 간격 */
}

• gap: 행과 열 사이의 간격
• row-gap, column-gap으로 따로도 지정 가능

📁 예제: ex03~ex04_gridContainer.html

---

5️⃣ 정렬: align-items / justify-items

.container {
  align-items: center;
  justify-items: end;
}

• 각 셀 안에서 아이템 위치 조절

속성	방향	설명
align-items	수직	교차축 정렬
justify-items	수평	주축 정렬

📁 예제: ex05_gridContainer.html

---

6️⃣ 전체 블록 정렬: align-content / justify-content

.container {
  justify-content: center;
  align-content: space-between;
}

• 전체 그리드 묶음을 정렬함

📁 예제: ex06_gridContainer.html

---

7️⃣ auto-fill vs auto-fit

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

속성	설명
auto-fill	빈 칸 남기고 그대로 유지
auto-fit	빈 칸도 줄여서 꽉 채움

📁 예제: ex07_gridContainer.html

---

8️⃣ Grid Item 위치 지정: grid-row / grid-column

.item1 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

• 아이템이 여러 셀에 걸쳐 배치됨

📁 예제: ex11_gridItem.html

---

9️⃣ grid-area 축약형

.item1 {
  grid-area: 1 / 1 / 3 / 3;
}

• 순서: row-start / column-start / row-end / column-end

📁 예제: ex12_gridItem.html

---

🔟 아이템 순서 제어: order

.item:nth-child(1) { order: 1; }
.item:nth-child(3) { order: 5; }

• 작은 수일수록 먼저 배치됨
• Flexbox와 동일한 방식

📁 예제: ex14_gridItem.html

---

1️⃣1️⃣ minmax()로 반응형 제어

grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

• 열의 최소/최대 크기를 정함
• auto-fill과 함께 쓰면 유연한 레이아웃 구성 가능

📁 예제: ex21_gridMinmax.html

---

1️⃣2️⃣ 3x3 포스터 카드 실전 예제

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

• 정사각형 카드형 UI 만들기
• .item은 내부에 이미지 + 텍스트 구성

📁 예제: quiz01.html

---

🧠 정리

속성	설명
display: grid	Grid 레이아웃 시작
grid-template-columns / rows	열/행의 개수 및 크기 설정
grid-template-areas	이름 기반 영역 배치
gap	셀 간 간격 설정
justify-items / align-items	셀 내부 정렬
justify-content / align-content	전체 그리드 정렬
grid-row / column	아이템의 위치 범위 지정
auto-fill / auto-fit	유동적 반복 배치
minmax()	반응형 유동 크기 설정
order	아이템 순서 변경