CSS 그리드에서 repeat 함수

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

예제

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

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

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

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

예제

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

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

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

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

예제

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

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

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

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

예제

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

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

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

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

예제

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

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

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

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

실습 문제