Grid 템플릿 행/열

사용법

공백으로 구분된 값 리스트를 해석하여 그리드 행(Row), 열(Column)을 설정합니다. 각 값은 트랙 크기를 말합니다.

속성	값
grid-template-rows	<track-size> ...
	<line-name> <track-size> ...
grid-template-columns	<track-size> ...
	<line-name> <track-size> ...

값

• <track-size>: 그리드에서 사용 가능한 공간의 길이 (px, rem, em, %, fr 등)

• <line-name>: 사용자가 설정한 임의의 선 이름

예시

.grid-container {
  grid-template-rows: 25% 100px auto;
  grid-template-columns: 40px 50px auto 50px 40px;
}

선 이름 설정

사용자가 임의로 설정한 선 이름([이름])을 사용할 수도 있습니다.

.grid-container {
  grid-template-rows: 
    [row-1-start] 25% [row-1-end] 100px [third-line] auto [last-line];
  grid-template-columns: 
    [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
}

선 이름을 1개 이상 설정하는 것도 가능합니다. 방법은 [이름-1 이름-2]와 같이 [] 내부에 공백으로 구분된 이름을 추가하면 됩니다.

.grid-container {
  grid-template-rows: [row-1] 100px [rows-1-end row-2-start] 30% [row-2-end];
}

설정이 반복되는 경우, repeat() 함수를 사용하여 손쉽게 설정할 수 있습니다.

.grid-container {
  grid-template-rows: repeat(3, 80px [row-start]) 5%;
  /* 결과: 80px [row-start] 80px [row-start] 80px [row-start] 5% */
  grid-template-columns: repeat(2, 15% 30px) auto;
  /* 결과: 15% 30px 15% 30px auto */
}

fr 단위를 사용하여 <track-size>를 그리드의 남은 공간 일부를 설정할 수 있습니다.

.grid-container {
  grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr */
}

fr 단위는 고정 값(px, rem 등) 단위가 먼저 계산된 후, 남은 공간을 사용하여 계산 처리됩니다.

.grid-container {
  grid-template-rows: 1fr 100px 2fr;
}

실습

레퍼런스

명시적으로 그리드를 정의할 때, 그리드 컨테이너에 3개의 속성을 사용해 설정할 수 있습니다.

• grid-template-rows

• grid-template-columns

• grid-template-areas

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#track-sizing