CSS 그리드 열(Grid Columns) 개념과 활용법 총정리

CSS 그리드 열이란?

CSS 그리드 레이아웃(Grid Layout)에서 세로 방향으로 뻗어 있는 선을 그리드 열(Grid Columns)이라고 부릅니다. 아래 이미지에서 확인할 수 있듯이, 컨테이너를 수직으로 나누는 경계선들이 바로 그리드 열입니다.

그리드 열의 기본 구조

그리드 열은 그리드 컨테이너 내부에 생성되는 수직 트랙(vertical track)으로, 요소들을 좌우로 배치할 때 기준이 됩니다. 열과 열 사이의 간격은 column-gap 속성으로 조절할 수 있습니다.

grid-template-columns 속성

그리드 열의 개수와 너비는 grid-template-columns 속성으로 정의합니다.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
}

위 코드는 첫 번째 열을 200px 고정 폭으로 만들고, 나머지 두 개의 열에 남은 공간을 균등하게 분배합니다.

자주 사용되는 단위

• px, %: 고정 크기 또는 비율 기반 지정
• fr: 남은 공간을 비율대로 분배하는 유연한 단위
• auto: 콘텐츠 크기에 맞춰 자동 계산
• repeat(): 반복되는 열 패턴을 간결하게 표현 (예: repeat(3, 1fr))

정리

그리드 열은 CSS 그리드 레이아웃의 핵심 구성 요소로, 세로 방향 선을 기준으로 웹 페이지의 구조를 직관적으로 설계할 수 있게 해줍니다. grid-template-columns와 함께 활용하면 반응형 레이아웃도 손쉽게 구현할 수 있습니다.