Functions

Draft

repeat(<various>iteration-count, <various>repeating-pattern)

그리드 레이아웃에서 트랙내 반복되는 그리드 항목의 지정된 횟수와 패턴에 따라 반복적인 배치를 한다.

설명

이 함수는 CSS Grid 속성 grid-template-columns 및 grid-template-rows에서 사용할 수 있다.

구문

repeat(iteration-count,)기본형식CSS3
그리드 항목을 담는 컨테이너의 크기에 따라 균등한 비율로 3개의 칼럼을 갖는 그리드를 만든다.

매개 변수

<various>iteration-count필수
반복횟수를 양의 정수로 설정하거나 그리드 컨테이너의 크기에 최대한 맞추어 반복하는 auto-fill, auto-fit 값을 설정할 수 있다. auto-fill과 auto-fit에 대한 자세한 내용은 아래 문서를 참고하라.
<various>repeating-pattern필수
반복되는 패턴을 다양한 방식으로 지정한다. 가능한 값의 타입은 <length>, <percentage>, <flex>, max-content, min-content, auto가 있다. 자세한 내용은 아래 문서를 참고하라.

지원 웹브라우저

기술 문서

repeat() 함수에서 인수로 사용되는 값의 타입

<length>

양의 정수 길이

<percentage>

column 그리드 트랙에서 그리드 컨테이너의 인라인 크기와 행 그리드 트랙에서 그리드 컨테이너의 블록 크기에 대한 음이 아닌 백분율 값이다. 그리드 컨테이너의 크기가 트랙의 크기에 의존하는 경우 <percentage>로 처리해야한다. 

<flex>

fr트랙의 플렉스 팩터를 지정하는 단위 를 가진 음이 아닌 치수 . 각 <flex>크기의 트랙은 플렉스 팩터에 비례하여 나머지 공간을 차지한다.

max-content

그리드 트랙을 점유하는 그리드 항목의 최대한의 콘텐츠 기여도를 나타낸다.

min-content

그리드 트랙을 점유하는 그리드 항목의 최소한의 콘텐츠 기여도를 나타낸다.

auto

최대치로, 최대 콘텐츠와 동일함. 최소로서 그것은 그리드 트랙을 점유하는 그리드 항목 중 (min-width/min-height로 지정된) 가장 큰 최소 크기를 나타낸다.

auto-fill

그리드 컨테이너가 관련 축에서 크기가 한정적이거나 최대 인 경우 반복 횟수는 그리드가 그리드 컨테이너에 넘치지 않도록 가능한 가장 큰 양의 정수이다. 

auto-fit

그리드 항목을 배치한 후 빈 반복 트랙이 붕괴되는 것을 제외하고 auto-fill 동작과 동일하게 행동한다. 빈 트랙은 유입 그리드 항목이 없거나 그 안에 걸쳐 있지 않은 트랙이다.