CSS 그리드에서 repeat 함수

동일한 크기가 지정된 여러 개의 열이 있는 경우, repeat 함수를 사용하여 기록을 단순화할 수 있습니다. 이 함수의 첫 번째 매개변수는 열의 개수를 지정하고, 두 번째 매개변수는 열의 너비를 지정합니다. 예제를 통해 이것이 어떻게 작동하는지 살펴보겠습니다.

예제

크기가 동일한 세 개의 열이 있다고 가정해 보겠습니다:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

repeat을 사용하여 기록을 단순화합니다:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

크기가 동일한 세 개의 열과 크기가 다른 네 번째 열이 있다고 가정해 보겠습니다:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr;
}

repeat을 사용하여 기록을 단순화합니다:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
}

처음 세 개의 열은 크기가 같고, 다음 세 개의 열은 다른 크기라고 가정해 보겠습니다:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

repeat을 사용하여 기록을 단순화합니다:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

처음 세 개의 열은 크기가 같고, 그 다음에 또 다른 열이 있으며, 그 다음에 또 다른 크기의 세 개의 열이 있다고 가정해 보겠습니다:

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

repeat을 사용하여 기록을 단순화합니다:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

이 단순화는 모든 크기 단위에 대해 작동합니다. 예를 들어 픽셀 단위의 세 개의 열이 있다고 가정해 보겠습니다:

#parent {
	display: grid;
	grid-template-columns: 200px 200px 200px;
}

repeat을 사용하여 기록을 단순화합니다:

#parent {
	display: grid;
	grid-template-columns: repeat(3, 200px);
}

repeat을 사용하여 크기가 같은 4개의 열을 만드세요.

크기가 100px인 4개의 열과, 크기가 2fr인 3개의 열을 만드세요.

크기가 100px인 2개의 열, 크기가 200px인 3개의 열, 크기가 1fr인 하나의 열, 그리고 크기가 10%인 2개의 열을 만드세요.