CSS 그리드 레이아웃이란?
웹 페이지를 디자인할 때 CSS 그리드 레이아웃(Grid Layout) 모듈을 활용하면 행(row)과 열(column)로 구성된 격자 구조를 기반으로 화면을 효율적으로 배치할 수 있습니다. 그리드 레이아웃은 복잡한 웹 레이아웃도 직관적이고 체계적으로 설계할 수 있게 해주는 강력한 CSS 도구입니다.
그리드 레이아웃의 핵심 요소
그리드 레이아웃은 다음과 같은 주요 구성 요소로 이루어져 있습니다.
- 그리드 컨테이너와 아이템: 그리드 레이아웃은 부모 요소(그리드 컨테이너)와 자식 요소(그리드 아이템)로 구성됩니다.
- 행(Row): 그리드 아이템들이 가로 방향으로 나열되는 줄을 의미합니다.
- 열(Column): 그리드 아이템들이 세로 방향으로 배치되는 줄을 의미합니다.
- 간격(Gap): 행과 열 사이의 여백으로, 아이템 간의 시각적인 분리를 담당합니다.
행과 열의 차이
행은 그리드 아이템들의 수평선(horizonal line)에 해당하며, 열은 수직선(vertical line)에 해당합니다. 즉, 왼쪽에서 오른쪽으로 이어지는 방향이 행이고, 위에서 아래로 이어지는 방향이 열입니다. 이 두 축을 조합하면 마치 바둑판처럼 콘텐츠를 자유롭게 배치할 수 있습니다.
간단한 그리드 예제
다음은 부모 요소에 display: grid를 적용하여 그리드 컨테이너를 만들고, 열과 행 사이의 간격을 지정하는 기본적인 예시입니다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}위 코드는 세 개의 동일한 너비를 가진 열을 만들고, 아이템 사이에 20px의 간격을 설정합니다. 이처럼 그리드 레이아웃을 사용하면 최소한의 코드로 정렬된 반응형 레이아웃을 손쉽게 구현할 수 있습니다.
정리
CSS 그리드 레이아웃은 행과 열이라는 2차원 구조를 기반으로 웹 페이지를 설계하는 현대적인 방법입니다. 부모-자식 관계의 구조, 행과 열의 방향, 간격 설정 같은 기본 개념만 확실히 이해하면, 어떤 복잡한 레이아웃도 체계적으로 구축할 수 있습니다.