CSS CSS 그리드 라인 (Grid Line) 기초설명
페이지 정보
조회 58회
본문
그리드 라인 (Grid Line) 기초설명
그리드 라인은 CSS 그리드 레이아웃의 뼈대를 이루는 핵심 개념입니다.
1. 그리드 라인이란?
그리드 라인은 그리드 컨테이너 내부의 행(Row)과 열(Column)을 나누는 경계선을 의미합니다.
번호 부여: 그리드 라인은 1번부터 시작하여 양수와 음수 번호가 자동으로 부여됩니다.
방향성: 가로선(Row Lines)과 세로선(Column Lines)으로 구분됩니다.
아이템 배치: 그리드 아이템의 위치를 잡을 때 "몇 번 라인에서 시작해서 몇 번 라인에서 끝날지"를 지정하는 기준이 됩니다.
2. 그리드 라인 번호 체계
그리드는 시작점뿐만 아니라 끝점에서도 거꾸로 번호를 매길 수 있습니다.
구분 | 양수 번호 (왼쪽/위에서 시작) | 음수 번호 (오른쪽/아래에서 시작) |
첫 번째 라인 | 1 | - (전체 라인 수 + 1) |
마지막 라인 | 전체 라인 수 + 1 | -1 |
Tip:-1은 그리드의 가장 마지막 라인을 의미하므로, 전체 칸 수를 모를 때 마지막까지 확장하고 싶다면 유용하게 쓰입니다.
3. 주요 속성과 라인 활용법
아이템을 특정 위치에 배치할 때 사용하는 속성들입니다.
grid-column-start/grid-column-end: 열 라인의 시작과 끝 번호 지정grid-row-start/grid-row-end: 행 라인의 시작과 끝 번호 지정단축 속성 (Shorthand):
grid-column: [시작] / [끝];grid-row: [시작] / [끝];
| 속성 | 설명 | 예시 |
| grid-column-start | 열의 시작 번호를 지정합니다. | grid-column-start: 1; |
| grid-column-end | 열의 끝 번호를 지정합니다. | grid-column-end: 4; |
| grid-column | 열의 시작과 끝 번호를 함께 지정합니다. 시작과 끝 번호는 슬래시(/)로 구분합니다. | grid-column: 1 / 4; |
| grid-row-start | 행의 시작 번호를 지정합니다. | grid-row-start: 2; |
| grid-row-end | 행의 끝 번호를 지정합니다. | grid-row-end: 4; |
| grid-row | 행의 시작과 끝 번호를 함께 지정합니다. 시작과 끝 번호는 슬래시(/)로 구분합니다. | grid-row: 2 / 4; |
4. 실전 활용 예시
A. 특정 범위 지정하기
CSS
.item {
/* 1번 열 라인에서 시작해서 3번 열 라인에서 끝남 (2칸 차지) */
grid-column: 1 / 3;
/* 2번 행 라인에서 시작해서 마지막 라인까지 차지 */
grid-row: 2 / -1;
}
B. span 키워드 활용 (칸수 기준)
라인 번호 대신 "몇 칸을 차지할지"를 지정할 수 있습니다.
CSS
.item {
/* 1번 라인에서 시작하여 2칸(span 2)을 차지 */
grid-column: 1 / span 2;
}
5. 핵심 요약 및 주의사항
라인 vs 칸: 라인은 경계선입니다. 3개의 열(Column)이 있다면 라인은 4개가 존재합니다.
간격(Gap): 그리드 라인 사이에
gap을 주어 아이템 간의 간격을 조절할 수 있습니다.유연한 크기:
fr단위를 사용하여 라인 사이의 간격을 비율로 조절하면 반응형 레이아웃 구현이 쉬워집니다.가변 높이 대응: 행의 높이가 내용에 따라 변해야 할 때는
minmax()함수를 활용하여 라인 간의 최소/최대 거리를 설정하는 것이 좋습니다.