CSS의 grid 속성은 그리드 레이아웃을 구성할 때 필요한 여러 개별 속성을 한 줄로 설정할 수 있는 축약형(shorthand) 속성입니다. 이 속성 하나만으로 다음과 같은 하위 속성들을 동시에 지정할 수 있습니다.
- grid-template-rows – 행(row)의 크기 정의
- grid-template-columns – 열(column)의 크기 정의
- grid-template-areas – 영역 이름을 이용한 배치 정의
- grid-auto-rows – 자동 생성되는 행의 크기 지정
- grid-auto-columns – 자동 생성되는 열의 크기 지정
- grid-auto-flow – 항목이 배치되는 흐름 방향 지정
grid 속성의 기본 문법
가장 일반적인 사용 형태는 다음과 같습니다.
grid: 행크기 / 열크기;
예를 들어 grid: 100px / auto auto;라고 작성하면, 첫 번째 행의 높이는 100px로 고정되고 두 개의 열은 콘텐츠 크기에 맞게 자동으로 너비가 조절됩니다.
예제 코드
아래 코드는 grid 속성을 실제로 적용한 예제입니다. 컨테이너에 6개의 요소를 배치하여 2열 그리드 레이아웃을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid: 100px / auto auto;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.container>div {
background-color: yellow;
text-align: center;
padding: 10px 0;
font-size: 20px;
}
</style>
</head>
<body>
<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: 100px / auto auto; – 행 높이를 100px로 설정하고, 두 개의 열을 자동 너비로 배치합니다.
- grid-gap: 10px; – 그리드 항목 사이의 간격을 10px로 지정합니다.
위 코드를 실행하면 빨간색 배경의 컨테이너 안에 노란색 카드들이 격자 형태로 정렬된 결과를 확인할 수 있습니다. 각 행의 높이는 100px로 유지되며, 항목들은 좌에서 우로 순서대로 배치됩니다.
정리
grid 축약형 속성을 활용하면 여러 그리드 관련 속성을 개별적으로 선언하지 않고도 간결하게 레이아웃을 정의할 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다. 복잡한 반응형 레이아웃을 만들 때도 grid 속성과 함께 fr 단위, minmax() 함수 등을 조합하면 더욱 유연한 디자인을 구현할 수 있습니다.