CSS Grid 레이아웃에서 grid-area 속성을 사용하면 grid-row-start, grid-column-start, grid-row-end, grid-column-end 네 가지 속성을 한 번에 설정할 수 있습니다. 개별 속성을 따로 작성하는 대신 하나의 선언으로 요소가 차지할 그리드 영역을 간결하게 정의할 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다.
grid-area 속성의 기본 문법
grid-area 속성은 슬래시(/)로 구분된 네 개의 값을 순서대로 받습니다.
grid-area: row-start / column-start / row-end / column-end;
예를 들어 grid-area: 1 / 2 / 2 / 5;는 다음과 같은 의미입니다.
- 행 시작(row-start): 1번째 그리드 라인에서 시작
- 열 시작(column-start): 2번째 그리드 라인에서 시작
- 행 끝(row-end): 2번째 그리드 라인에서 종료
- 열 끝(column-end): 5번째 그리드 라인에서 종료
예제 코드
아래 예제는 grid-area 속성을 실제로 적용한 코드입니다. 첫 번째 요소(.ele1)가 지정된 영역을 차지하는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
background-color: green;
grid-template-columns: auto auto;
padding: 20px;
grid-gap: 10px;
}
.container > div {
background-color: orange;
text-align: center;
padding: 10px 0;
font-size: 20px;
}
.ele1 {
grid-area: 1 / 2 / 2 / 5;
}
</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>
코드 설명
위 예제에서 컨테이너는 display: grid;로 설정되어 있으며, grid-template-columns: auto auto;를 통해 두 개의 열을 가진 그리드를 생성합니다. 이때 .ele1 요소에 적용된 grid-area: 1 / 2 / 2 / 5; 값은 해당 요소가 첫 번째 행의 두 번째 열부터 마지막 열까지 확장되도록 배치합니다. 나머지 요소들은 자동 배치 알고리즘에 따라 남은 공간에 순서대로 배치됩니다.
이처럼 grid-area 속성을 활용하면 복잡한 레이아웃도 짧고 직관적인 코드로 구현할 수 있어, 게임 보드나 대시보드와 같은 구조화된 UI를 만들 때 특히 유용합니다.