그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.
이 함수는 CSS Grid 속성 grid-template-columns 및 grid-template-rows에서 사용할 수 있다.
repeat() 함수에서 반복 지정 매개 변수에 대한 타입을 나타낸다.
반복 횟수를 지정한다.
<integer [1,∞]> | auto-fill | auto-fit ]
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
독립형 그리드 축에서는 허용된 그리드 트랙 영역 내에서 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다. 트랙 내에서 그리드 레이아웃 항목수 보다 큰 값으로 반복이 된다면 남은 트랙 공간을 채우도록 빈 column 또는 row를 생성한다. 반대로 공간이 부족하면 다음 트랙을 생성해 역시 그리드 컨테이너를 오버플로우(overflow) 하지 않는 최대 양의 정수만큼 반복한다.
하위 그리드 축에서 <line-name-list>당 한번만 유효하며 이름 목록이 하위 그리드의 지정된 그리드 범위와 일치하도록 충분한 횟수를 반복한다.
그리드 항목 배치 후 빈 반복 트랙이 축소된다는 점을 제외하고는 autl-fill과 동일하다. 빈 트랙은 인플로우(in-flow) 그리드 항목이 배치되거나 가로질러 있지 않은 트랙이다.
하나 이상의 트랙(track) 크기가 명시된 목록을 나타낸다.
반복되는 값의 타입 또는 키워드를 지정한다.
포함된 다양한 타입 체인에서 사용되는 타입과 키워드는 다음과 같다.
fr 트랙의 플렉스 팩터를 지정하는 단위 를 가진 음이 아닌 치수이다. 각 [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.
'[' <custom-ident>* ']'임의의 사용자 정의 문자열을 나타낸다.
모든 속성을 표시하지 않을 수도 있다.
애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
그리드 항목이 몇 개의 열(column)로 확장되는지 또는 항목이 끝나는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 시작되는 열(column)의 줄의 위치를 정의한다.
그리드 항목이 몇 개의 행(row)으로 확장되는지 또는 그리드 항목이 끝나는 행(row)의 위치를 정의한다.
그리드 항목이 시작될 행(row)의 위치를 정의한다.
하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
하나 이상의 CSS 카운터를 만들거나 재설정한다.
목록의 마커의 모양을 설정한다.
repeat() 함수를 사용하여 생성한 크기가 고정되지 않은 트랙(track) 집합을 나타낸다.
repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
그리드 레이아웃(grid layout)에서 그리드 라인(grid line)에 지정한 이름을 나타낸다. CSS에서 사용하는 키워드는 이름으로 사용할 수 없다.
'[' <custom-ident>* ']'하위 타입인 <track-breadth>를 포함하여 minmax(), fit-content() 함수를 사용하여 지정한 트랙(track)의 크기를 나타낸다.
<track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
유연하지 않은(inflexible) 의미를 가진 이름에서 알 듯이 <track-breadth> 타입에서 fr 단위가 제외되었다.
<length-percentage> | min-content | max-content | auto
<length>와 <percentage> 타입을 나타낸다.
<length> | <percentage>숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
어떠한 기준으로 부터 백분율로 표현한다.
최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-content 및 justify-content 속성으로 트랙을 확장할 수 있다.
최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.
그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.
콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.
<length-percentage>와 fr 단위를 사용한 <flex> 값으로 지정된 트랙(track) 폭에 대한 값을 나타낸다. min-content, max-content, auto 키워드를 사용해 트랙(track) 폭의 크기를 지정할 수도 있다.
<length-percentage> | <flex> | min-content | max-content | auto
그리드 트랙(grid track)의 플렉스 펙터(flex factor)를 지정하는 음수가 아닌 fr 단위의 치수를 나타낸다.
<number-token> 유형 플래그가 'integer'인 소숫점이 없는 정수를 표현한다.
[HYPHEN-MINUS]?[0-9]
0에서 9까지의 숫자로 구성된다. 선택적으로 음수 기호(U+002D HYPHEN-MINUS)가 앞에 올 수 있다.
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
<length>와 <percentage> 타입을 나타낸다.
<length> | <percentage>최대값일 경우 그리드 트랙을 차지하는 그리드 항목의 최대 콘텐츠 기여도를 나타낸다. max-content와 달리 align-content 및 justify-content 속성으로 트랙을 확장할 수 있다.
최소값의 경우 그리드 트랙을 차지하는 그리드 항목의 최대 최소 크기(min-width / min-height)를 나타낸다.
그리드 컨테이너의 공간이 넉넉한 경우에 해당 축에서 콘텐츠를 담기 위한 이상적인 크기를 나타낸다.
콘텐츠가 넘치지 않고 담길 수 있는 가장 작은 크기를 나타낸다.
모든 함수를 표시하지 않을 수도 있다.
모든 함수를 표시하지 않을 수도 있다.
하위 타입인 <track-breadth>를 포함하여 minmax(), fit-content() 함수를 사용하여 지정한 트랙(track)의 크기를 나타낸다.
<track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
grid-template-columns: repeat(3, 1fr);
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Grid Layout Module Level 1 | Last review date: 2023-2-17 | |