CSS 그리드 라인이란?
그리드 라인(Grid Lines)은 CSS Grid 레이아웃을 구성하는 기본 요소로, 열 라인(column line)과 행 라인(row line)을 통칭합니다.
열 라인은 각 열(column)과 열 사이에 존재하는 세로선이며, 행 라인은 각 행(row)과 행 사이에 존재하는 가로선입니다. 이 라인들에는 자동으로 번호가 부여되며, 이 번호를 활용하면 그리드 컨테이너 내부에서 아이템이 차지할 영역을 정밀하게 지정할 수 있습니다.
그리드 라인 예제
다음은 grid-row-start와 grid-row-end 속성을 사용하여 첫 번째 요소가 여러 행에 걸쳐 세로로 길게 배치되도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 20px;
}
.container > div {
background-color: orange;
border: 2px solid gray;
padding: 35px;
font-size: 30px;
text-align: center;
}
.ele1 {
grid-row-start: 1;
grid-row-end: 6;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class = "container">
<div class = "ele1">1</div>
<div class = "ele2">2</div>
<div class = "ele3">3</div>
<div class = "ele4">4</div>
<div class = "ele5">5</div>
<div class = "ele6">6</div>
</div>
</body>
</html>예제 동작 원리
위 코드에서 .ele1 클래스는 grid-row-start: 1;로 시작 라인을 1번 행 라인으로, grid-row-end: 6;으로 종료 라인을 6번 행 라인으로 지정했습니다. 그 결과 첫 번째 요소는 1행부터 5행까지 세로로 확장되어 배치되고, 나머지 요소들은 남은 공간에 순서대로 채워집니다.
핵심 포인트 정리
- 그리드 라인은 별도 설정 없이 자동으로 생성되며, 왼쪽에서 오른쪽, 위에서 아래 방향으로 1부터 번호가 매겨집니다.
grid-column-start / grid-column-end속성으로 열 방향 배치를,grid-row-start / grid-row-end속성으로 행 방향 배치를 제어할 수 있습니다.- 두 속성은
grid-row: 1 / 6;처럼 슬래시(/)를 사용한 축약형으로 한 줄에 작성할 수도 있습니다.