CSS 그리드 레이아웃은 부모 요소(그리드 컨테이너)와 자식 요소(그리드 아이템)로 구성됩니다. 부모 요소에 display: grid를 선언하면 해당 요소가 그리드 컨테이너가 되고, 그 안에 포함된 직계 자식들이 자동으로 그리드 아이템으로 배치됩니다.
그리드 구조 이해하기
그리드 시스템에서 각 요소의 역할은 다음과 같습니다.
- 그리드 컨테이너(Grid Container):
display: grid속성을 가진 부모 요소로, 전체 레이아웃의 틀을 정의합니다. - 그리드 아이템(Grid Item): 컨테이너의 직계 자식 요소들로, 정의된 행(row)과 열(column)에 따라 배치됩니다.
예제: 6개 요소로 만드는 그리드
다음 예제는 두 개의 열을 가진 그리드를 생성하고, 총 6개의 자식 요소를 배치하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto;
padding: 20px;
}
.ele {
background-color: orange;
border: 2px solid gray;
padding: 25px;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>Game Board</h1>
<div class = "container">
<div class = "ele">1</div>
<div class = "ele">2</div>
<div class = "ele">3</div>
<div class = "ele">4</div>
<div class = "ele">5</div>
<div class = "ele">6</div>
</div>
</body>
</html>코드 설명
1. 그리드 컨테이너 설정 (.container)
display: grid;— 해당 요소를 그리드 컨테이너로 지정합니다.grid-template-columns: auto auto;— 두 개의 열을 생성하며, 각 열의 너비는 내용에 맞게 자동 조절됩니다.padding: 20px;— 컨테이너 내부 여백을 설정합니다.
2. 그리드 아이템 스타일 (.ele)
background-color: orange;— 각 아이템의 배경색을 주황색으로 지정합니다.border: 2px solid gray;— 회색 테두리로 아이템 경계를 명확히 보여줍니다.padding: 25px;및text-align: center;— 내용물의 여백과 가운데 정렬을 적용합니다.
실행 결과
위 코드를 실행하면 2열 × 3행 구조의 격자가 만들어지며, 번호가 매겨진 6개의 주황색 박스가 순서대로 배치됩니다. 이처럼 그리드 레이아웃을 활용하면 복잡한 float나 position 기법 없이도 깔끔한 2차원 레이아웃을 손쉽게 구현할 수 있습니다.