Grid 트랙 크기 자동 설정
사용법
그리드 행/열 트랙 크기 자동 설정
암시적인 그리드 행/열 트랙 크기를 자동으로 설정합니다.
암시적인 그리드 트랙이란?
사용자가 설정하지 않은 임의의 트랙으로 사용자가 명시적으로 grid-template-rows / grid-template-columns 속성을 설정하지 않은 나머지 그리드 트랙을 가리킵니다.
속성
값
grid-auto-rows
<track-size> ...
grid-auto-columns
<track-size> ...
값
<track-size>: 그리드에서 사용 가능한 단위 (px,rem,em,%,fr등)
예시
사용자가 명시적으로 행/열 템플릿 속성을 설정하면 그리드 트랙 크기로 적용됩니다.
.grid-container {
grid-template-rows: repeat(2, 60px);
grid-template-columns: 90px 90px;
}결과는 2행 2열 그리드가 만들어집니다.
여기서 만약 개별 그리드 아이템에 행/열 위치를 그리드 라인 기준으로 배치하게 되면 어떻게 될까요?
grid-row
grid-column
.item-a {
grid-row: 2 / 3;
grid-column: 1 / 2;
}
.item-b {
grid-row: 2 / 3;
grid-column: 5 / 6;
}결과는 다음과 같이 처리됩니다.
결과에서 보여지듯이 .item-b에 설정한 열 그리드 라인 5~6 배치는 암시적인 열 그리드(grid-auto-columns) 설정에서 정의되지 않은 영역으로, 존재하지 않는 행/열에 배치하기 위해 암시적인 트랙이 자동으로 생성됩니다. (그림을 자세히 보면 암시적으로 생성된 트랙 크기는 0으로 설정됩니다)
이처럼 자동으로 생성되는 그리드 트랙 크기를 임의의 값으로 설정하고 싶다면 다음과 같이 설정할 수 있습니다.
.grid-container {
grid-auto-columns: 60px;
}결과를 그려보면 다음과 같습니다. 암시적으로 생성된 그리드 트랙 크기는 60px로 설정됩니다.
레퍼런스
Last updated