[CSS] grid-template-columns, grid-template-rows

grid-column, grid-row에서 몇 칸까지 설정 가능한지는 결국 **그리드를 몇 칸으로 나눴느냐 (grid-template-columns, grid-template-rows)**에 따라 달라져요.

---

1. 칸(셀)의 기준 = grid line (격자선)

• 칸 자체가 아니라 **칸을 구분하는 선(line)**을 기준으로 번호가 매겨집니다.
• 예를 들어 grid-template-columns: repeat(3, 100px); → 3개의 열이 생기면, 선은 4개가 생겨요.

 

• 즉, grid-column은 선 번호를 기준으로 "어디서 시작해서 어디까지"를 지정하는 거예요.

---

2. 사용자가 칸 개수 설정

• 몇 칸으로 나눌지는 개발자가 grid-template-columns(가로), grid-template-rows(세로)로 정의합니다.
• 예시:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 가로 4칸 */
  grid-template-rows: repeat(3, 100px);  /* 세로 3칸 */
}

➡️ 이렇게 하면

• 가로: 열 4개 → 선 번호는 1~5
• 세로: 행 3개 → 선 번호는 1~4

---

3. grid-column, grid-row 설정 가능 범위

• grid-column → 1 / 5 까지 가능 (선이 5개니까)
• grid-row → 1 / 4 까지 가능 (선이 4개니까)

예:

 

.item {
  grid-column: 2 / 4; /* 열 2~3 차지 */
  grid-row: 1 / 3;    /* 행 1~2 차지 */
}

---

4. span 활용 (길이 지정)

 

.item {
  grid-column: 1 / span 2; /* 1번 선에서 시작, 가로로 2칸 차지 */
  grid-row: 2 / span 2;    /* 2번 선에서 시작, 세로로 2칸 차지 */
}

---

✅ 정리하면

• 가로/세로 칸 개수는 사용자가 grid-template-columns, grid-template-rows에서 정의.
• grid-column / grid-row는 그 칸을 구분하는 선 번호를 기준으로 "시작/끝"을 지정.
• 따라서 칸 개수를 크게 잡으면 grid-column, grid-row도 더 크게 지정 가능.

 

 

 

1️⃣ 사용자가 직접 칸(그리드) 나누는 경우

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 가로 4칸 */
  grid-template-rows: repeat(3, 100px);  /* 세로 3칸 */
}

• 가로 4칸 → 선(line)은 1~5번까지 생김
• 세로 3칸 → 선(line)은 1~4번까지 생김

이제 아이템을 grid-column, grid-row로 배치할 수 있음:

 

.item1 { grid-column: 1 / 3; } /* 가로 2칸 차지 */ .item2 { grid-row: 2 / 4; } /* 세로 2칸 차지 */

👉 이 방식은 칸 개수를 개발자가 고정하기 때문에, 정확한 제어가 가능해요.

---

2️⃣ 자동으로 칸이 생겨나는 경우

칸을 미리 안 나누면, 브라우저가 내용 크기나 auto-placement 규칙에 따라 칸을 자동으로 만들어줘요.

예:

.container { display: grid; }

이 상태에서 아이템에 grid-column: 1 / 3; 같은 걸 쓰면,

• 브라우저가 알아서 최소한 필요한 만큼의 열/행을 생성해서 대응해줍니다.
• 즉, 칸이 "자동 확장"돼요.

---

✅ 결론

• 보통은 직접 grid-template-columns / grid-template-rows로 칸 개수를 나눈 뒤 → grid-column / grid-row를 씀
• 하지만 꼭 칸을 미리 안 잡아도, 아이템이 위치를 요구하면 브라우저가 자동으로 칸을 만들어줌