그리드 트랙 (Grid Tracks)
**그리드 트랙(grid track)**은 인접한 두 격자 선 사이의 공간입니다. grid-template-columns 및 grid-template-rows (en-US) 속성 또는 약식 grid (en-US) 또는 grid-template (en-US) 속성을 사용하여 '명시적 그리드'에 정의됩니다. 트랙은 명시적 그리드에서 생성된 트랙 외부에 그리드 요소를 배치하여 '암시적 그리드'에도 생성됩니다.
아래 이미지는 그리드의 첫 번째 행 트랙을 보여줍니다.
명시적 그리드의 트랙 크기
grid-template-columns 및 grid-template-rows (en-US)을 사용하여 그리드 트랙을 정의할 때, 모든 길이 단위를 사용할 수 있습니다. 또한, 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타내는 플렉스 단위인 fr도 사용할 수 있습니다.
예제
아래 예는 3개의 열 트랙(200픽셀 중 하나, 1fr의 두 번째 트랙, 3fr의 세 번째 트랙)이 있는 그리드를 보여줍니다. 그리드 컨테이너에서, 사용가능한 공간에서 200픽셀을 빼고 남은 공간을 4로 나눕니다. 한 부분은 2번째 열에, 나머지 3 부분은 3번째 열에 제공됩니다.
css
.wrapper {
display: grid;
grid-template-columns: 200px 1fr 3fr;
}
html
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
암시적 그리드에서의 트랙 크기
암시적 그리드에서 생성된 트랙은 기본적으로 자동으로 크기가 조절되지만, grid-auto-rows (en-US) 및 grid-auto-columns (en-US) 속성을 사용해 이러한 트랙의 크기를 정의할 수 있습니다.