CSS 그리드 레이아웃에서 행과 열 정의하기

grid-template-columns와 grid-template-rows는 CSS 그리드 레이아웃에서 행과 열을 정의하는 속성입니다. 이 속성들을 통해 컨테이너 내에 요소들이 어떻게 배치될지를 결정할 수 있습니다.

기본 개념

• grid-template-columns: 그리드의 열(column) 너비를 설정합니다.
• grid-template-rows: 그리드의 행(row) 높이를 설정합니다.

각 속성에 값을 반복하거나, 비율을 지정하거나, 최소값과 최대값을 조정할 수 있습니다.

기본 문법

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 200px 100px;
}

위 예제는:

• 3개의 열을 1fr씩 할당해 같은 비율로 나눕니다.
• 각 행은 100px, 200px, 100px 높이로 설정됩니다.

값의 종류와 사용 예시

1. 고정 크기 사용하기 (픽셀 단위)

.container {
    display: grid;
    grid-template-columns: 200px 100px 150px; /* 각 열의 너비 설정 */
    grid-template-rows: 100px 300px;          /* 각 행의 높이 설정 */
}

• 첫 번째 열은 200px, 두 번째 열은 100px, 세 번째 열은 150px로 설정됩니다.
• 첫 번째 행은 100px, 두 번째 행은 300px 높이로 설정됩니다.

2. 비율에 따라 크기 조절하기 (fr 단위)

fr은 가변적인 크기 비율을 의미하며, 그리드 컨테이너의 가용 공간을 기준으로 비율을 지정할 수 있습니다.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 비율로 너비 조정 */
    grid-template-rows: 1fr 3fr;        /* 비율로 높이 조정 */
}

• 첫 번째와 세 번째 열이 같은 비율(1fr), 가운데 열이 두 배(2fr)의 비율을 가집니다.
• 첫 번째 행의 높이가 1fr, 두 번째 행은 세 배인 3fr의 비율을 가집니다.

3. repeat() 함수로 반복 설정하기

열 또는 행을 같은 규칙으로 여러 개 정의할 때 유용합니다.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개의 동일한 너비 열 생성 */
    grid-template-rows: repeat(3, 200px);  /* 3개의 동일한 높이 행 생성 */
}

• 4개의 열이 1fr씩 같은 너비로 생성됩니다.
• 3개의 행이 각각 200px의 고정 높이를 가집니다.

4. minmax()로 최소 및 최대 크기 설정하기

minmax()는 최소와 최대 크기를 지정하여 반응형 레이아웃을 만들 때 유용합니다.

.container {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 최소 100px, 최대 1fr */
}

• 각 열은 최소 100px, 최대 1fr까지 확장됩니다.

5. auto 값으로 자동 크기 설정

auto는 각 그리드 항목의 콘텐츠 크기에 맞춰 자동 조절됩니다.

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

• 가운데 열이 자동으로 크기를 조절합니다.

종합 예제

아래 예제는 다양한 그리드 템플릿 설정을 활용하여 컨테이너에 그리드를 배치합니다.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr minmax(100px, 300px);
    grid-template-rows: 100px repeat(2, auto) 150px;
}

• 3개의 열:
  • 첫 번째 열은 1fr
  • 두 번째 열은 2fr
  • 세 번째 열은 최소 100px에서 최대 300px로 설정됩니다.
• 4개의 행:
  • 첫 번째 행은 100px
  • 두 번째와 세 번째 행은 높이를 콘텐츠에 맞춰 자동 조절
  • 네 번째 행은 150px입니다.

요약

• grid-template-columns와 grid-template-rows를 통해 열과 행의 크기를 다양한 방식으로 설정할 수 있습니다.
• 픽셀(px), 비율(fr), 반복(repeat()), 최소/최대(minmax())와 같은 옵션을 통해 유연하고 반응형인 레이아웃을 구성할 수 있습니다.