[CSS] grid-column, grid-row

grid-column과 grid-row는 CSS Grid Layout에서 아이템이 어느 열(column), 어느 행(row)에 위치할지 제어하는 속성이에요.

---

1. 기본 개념

• CSS Grid는 행(row)과 열(column)로 나뉜 2차원 레이아웃 시스템.
• 각 셀은 **격자선(Grid line)**으로 구분돼요.
• grid-column과 grid-row는 아이템이 어느 선부터 어느 선까지 차지할지 지정하는 속성이에요.

---

2. grid-column

 

.item { grid-column: 1 / 3; }

➡️ 1번 선부터 3번 선 직전까지 차지 → 즉, 2칸을 가로로 점유.

세부 속성

• grid-column-start: 시작하는 선 번호
• grid-column-end: 끝나는 선 번호
• 단축형: grid-column: start / end;

---

3. grid-row

 

.item { grid-row: 2 / 4; }

➡️ 2번 선부터 4번 선 직전까지 차지 → 즉, 세로로 2칸 점유.

세부 속성

• grid-row-start: 시작하는 선 번호
• grid-row-end: 끝나는 선 번호
• 단축형: grid-row: start / end;

---

4. 예시

 

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 3열 */
  grid-template-rows: repeat(3, 100px);    /* 3행 */
  gap: 10px;
}

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

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

---

5. 특별한 값

• span n → n칸만큼 확장
• auto → 가능한 영역 자동 배치

grid-column: span 2; /* 현재 위치부터 2칸 차지 */

---

👉 정리하면:

• grid-column = 가로 범위 (시작 선 / 끝 선)
• grid-row = 세로 범위 (시작 선 / 끝 선)
• span을 쓰면 길이 중심으로 지정할 수 있음.