CSS 그리드 행(Grid Rows) 완벽 이해하기

CSS 그리드 행이란?

CSS Grid 레이아웃에서 그리드 행(Grid Row)은 격자 안에 배치되는 가로 방향의 줄을 의미합니다. 아래 이미지에서 볼 수 있는 수평선들이 바로 그리드 행입니다.

그리드 행의 기본 개념

그리드 컨테이너는 여러 개의 행과 열로 구성됩니다. 이때 각각의 가로줄이 하나의 '행'을 형성하며, 요소들은 이 행과 열이 교차하는 영역(셀)에 배치됩니다.

행의 크기 정의하기

그리드 행의 높이는 grid-template-rows 속성을 사용하여 지정할 수 있습니다.

.container {
  display: grid;
  grid-template-rows: 100px 200px auto;
}

위 코드는 첫 번째 행을 100px, 두 번째 행을 200px, 세 번째 행은 콘텐츠 크기에 맞게 자동으로 설정합니다.

유용한 단위

• fr 단위: 남은 공간을 비율에 따라 분배합니다. (예: 1fr 2fr)
• auto: 콘텐츠 크기에 맞춰 자동 조절됩니다.
• minmax(): 최소값과 최대값 사이에서 유연하게 크기를 조절합니다.

마무리

그리드 행은 CSS Grid 레이아웃의 핵심 구성 요소입니다. 행과 열의 개념을 정확히 이해하면 복잡한 반응형 레이아웃도 훨씬 쉽고 직관적으로 만들 수 있습니다.