[CSS] Grid - 위치 지정의 핵심

1. Grid의 숫자는 “셀”이 아니라 Grid Line

CSS Grid에서 위치를 지정할 때 쓰는 숫자는
칸(grid cell) 이 아니라 선(grid line) 을 의미합니다.

.item {
  grid-row: 3 / 5;
}

 

이 뜻은:

3번 row line부터 5번 row line까지 차지

❌ “3번째 줄부터 5번째 줄”
⭕ “3번 선에서 시작해서 5번 선에서 끝남”

 

2. 음수 번호 (-1, -2)의 의미

Grid Line은 뒤에서부터도 셀 수 있습니다.

.item {
  grid-column: 2 / -2;
}

• 앞에서 2번 column line
• 뒤에서 2번째 column line

좌우 여백을 남기고 가운데 영역만 차지하는 패턴

 

3. span은 “몇 칸을 차지할지”를 말한다

span은 끝 라인을 직접 계산하지 않고,
차지할 개수만 선언하는 방식입니다.

.item {
  grid-row: 3 / span 2;
}

• 3번 row line에서 시작
• row 2칸만큼 확장

결과는 grid-row: 3 / 5 와 동일

 

4. 정리하면

• grid-row, grid-column 숫자 = grid line 번호
• 3 / 5 = 3번 라인부터 5번 라인까지
• 음수(-1, -2) = 뒤에서부터 센 라인
• span = 차지할 칸 수를 선언

“Grid에서 숫자는 칸이 아니라 선(line)을 가리키고,
span은 계산 대신 의도를 적는 문법이다.”