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로 설정됩니다.

레퍼런스

CSS Grid Layout Module Level 1www.w3.org

w3.org/TR/css-grid-1/#propdef-grid-auto-columns