CSS Types

CSS Types

Editing

<auto-repeat>

가변 크기의 그리드 컨테이너에 반복적으로 그리드 항목을 배치하는 경우 그리드 컨테이너의 공간을 채우는 메커니즘을 나타낸다.

구문

  • CSS Grid Layout Module Level 2
    repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

사용되는 키워드

키워드요약
auto-fill

독립형 그리드 축에서는 허용된 그리드 트랙 영역 내에서 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다. 트랙 내에서 그리드 레이아웃 항목수 보다 큰 값으로 반복이 된다면 남은 트랙 공간을 채우도록 빈 column 또는 row를 생성한다. 반대로 공간이 부족하면 다음 트랙을 생성해 역시 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다.

하위 그리드 축에서 <line-name-list>당 한번만 유효하며 이름 목록이 하위 그리드의 지정된 그리드 범위와 일치하도록 충분한 횟수를 반복한다.

auto-fit

그리드 항목 배치 후 빈 반복 트랙이 축소된다는 점을 제외하고는 autl-fill과 동일하다. 빈 트랙은 인플로우(in-flow) 그리드 항목이 배치되거나 가로질러 있지 않은 트랙이다.

관련 함수

사용되는 타입

버전 명세

Modules
Module NameStatusSummary
CSS Grid Layout Module Level 2후보 추천 초안

사용자 인터페이스 설계에 최적화된 2차원 그리드 기반 레이아웃 시스템을 정의한다.


Last review date: 2022-6-23