Grid 아이템 수동 배치하기

이번 포스팅에서는 자동 배치에서 벗어나, CSS Grid의 grid-column 과 grid-row 속성을 사용해 원하는 셀(cell)에 직접 아이템을 배치하고, 여러 셀을 가로지르기(span) 하는 방법을 알아봅니다.

---

1. 브라우저 DevTools로 그리드 라인(Line) 확인하기

1. 브라우저 개발자 도구에서 Grid 레이아웃 표시 버튼을 클릭
2. 행(row)·열(column)마다 번호 매겨진 그리드 라인과, 라인 사이 셀(cell), 그리고 간격(gutter) 이 시각화됨
3. 각 아이템이 위치할 셀의 시작(start)·끝(end) 라인 번호를 확인

---

2. 단일 셀에 아이템 배치하기

 

/* 예: 8번 아이템(.l-8)을 2열 1행 셀에 배치 */
.l-8 {
  grid-column: 2 / 3;  /* 2번 열 라인에서 시작 → 3번 열 라인 직전까지 */
  grid-row:    1 / 2;  /* 1번 행 라인에서 시작 → 2번 행 라인 직전까지 */
}

• grid-column: 시작라인 / 끝라인;
• grid-row: 시작라인 / 끝라인;
• 반드시 Grid 컨테이너가 선언된 부모에 적용된 것이어야 함

---

3. 셀 넘치기(span)

• 여러 셀을 가로지르기: 끝 라인 대신 span 키워드를 사용

/* 1열 1행 셀에서 가로로 3셀 span */
.l-2 {
  grid-column: 1 / span 3;
  grid-row:    2 / 3;       /* 2행 1셀만 차지 */
}

• 끝 라인 번호를 직접 계산하기 어려울 때 유용

---

4. 음수 인덱스로 끝까지 채우기

• 마지막 라인까지 자동으로 확장하려면 음수 인덱스 -1 사용

/* 1열 시작 → 마지막 라인(-1)까지 가로 전체 차지 */
.full-span {
  grid-column: 1 / -1;
}

• 뒤에서부터 라인을 셀 때 -2, -3 등으로도 지정 가능

---

5. 행 방향 배치·스팬도 동일

 

/* 6번 아이템(.l-6)을 3행에서 끝까지 세로 스팬 */
.l-6 {
  grid-column: 1 / 2;   /* 1열 1셀 차지 */
  grid-row:    3 / -1;  /* 3행 시작 → 마지막 행까지 */
}

• grid-row 속성에도 start / end, span, -1 음수 인덱스를 동일하게 사용 가능

---

마무리 및 실습 제안

• 라인 번호를 활용해 셀 단위로 정확히 배치하고,
• span과 음수 인덱스를 통해 유연하게 여러 셀을 병합(spanning)하며,
• 중첩 배치(overlap)도 직접 테스트해 보세요.

다양한 배치를 직접 실험하며, Grid의 강력한 아이템 제어 기능을 익혀보시길 권장드립니다! 🚀