Css GridTemplate Repeat

Css GridTemplate Repeat

 

똑같은 값을 여러 번 반복해야 할때 repeat() 함수로 반복시킨 효과를 만든다.

 

함수 정의

repeat() 함수의 2개 arguments.

repeat count
첫 번째 인수. 트랙 목록이 반복되어야 하는 횟수를 지정한다. 1 이상의 정수 값 또는 auto-fill 또는 auto-fit 키워드 값으로 지정된다. 이러한 키워드 값은 그리드 컨테이너를 채우는 데 필요한 만큼 트랙 세트를 반복한다.

tracks
두 번째 인수. 반복될 트랙 세트를 지정한다. 기본적으로 이것은 하나 이상의 값으로 구성되며 각 값은 해당 트랙의 크기를 나타낸다. 각 크기는 <track-size> 값 또는 <fixed-size> 값을 사용하여 지정된다. 트랙 크기 전후에 <line-names> 값을 제공하여 각 트랙 앞이나 뒤에 하나 이상의 줄 이름을 지정할 수도 있다.

값 예제
repeat(2, 1fr);  /* 1fr 1fr */
repeat(3, 1fr 2fr);  /* 1fr 2fr 1fr 2fr 1fr 2fr */

 

예제

<style>
	#gridtemplateid1 {
		display: grid;
		grid-template-columns: repeat(3, 100px);
	}
</style>

<div id="gridtemplateid1">
    <div class="gridclass1">
		내용1
	</div>
	<script>
		gt = document.querySelector("#gridtemplateid1");
		go = document.querySelector(".gridclass1");
		for (i = 0; i < 30; i++) {
			gt.appendChild(go.cloneNode(deep = true));
		}
	</script>
</div>

내용1

 

예제 Css GridTemplate Ex1

 

Browser compatibility