CSS 그리드: 반복 기능 — 기본을 뛰어넘다

여보세요. 오늘 글에서는 CSS Grid repeat() 함수에 대해 자세히 알려드리고자 합니다. 그 외에도 이 눈에 띄지 않는 기능은 몇 가지 매우 강력한 기능을 제공합니다. 사용 가능한 공간에 따라 여러 트랙을 동적으로 변경할 수 있습니다. 여기에서 작동 방식을 보여 드리겠습니다.

이 기사는 내 CSS 그리드 소개 시리즈의 일부입니다. 이전 게시물을 확인하려면 전체 목차를 찾을 수 있습니다.


지금까지 나는 repeat() 함수가 길고 반복적인 트랙 크기 정의를 위한 지름길로 사용될 수 있다고 말했습니다. 함수 호출의 첫 번째 인수로 정수를 제공하여 이 기능을 수행할 수 있습니다. 이는 코드를 더 깔끔하고 읽기 쉽게 만드는 긴 코드 줄을 방지하는 데 도움이 되기 때문에 편리합니다.

grid-template-columns: repeat(5, 200px);

instead of:

grid-template-columns: 200px 200px 200px 200px 200px;

정수 외에도 repeat() 함수는 두 개의 추가 키워드를 첫 번째 인수로 허용합니다. 이러한 키워드는 자동 맞춤 및 자동 채우기입니다.

.container {
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-template-columns: repeat(auto-fill, 200px);
}

repeat() 함수의 첫 번째 인수로 키워드.

키워드를 함수 인수로 사용하면 지정된 차원의 트랙 수가 그리드 컨테이너 내의 사용 가능한 공간에 맞게 동적으로 조정됩니다. 이 동작은 두 키워드 모두 공통입니다.

.container {
   ...
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

사용 가능한 여유 공간이 충분해지면 새 트랙이 어떻게 추가되고 사용 가능한 공간이 줄어들면 기존 트랙이 어떻게 제거되는지 확인하십시오.

또한 이 방법을 사용하는 모든 기존 또는 새로 생성된 트랙은 명시적이라는 점을 명심하십시오. 즉, 예를 들어 마지막 줄을 기준으로 트랙을 참조할 수 있습니다(음수 줄 번호 사용).

<div class="container">
    <div class="item"></div>
</div>

.container {
    ...
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.item {
    ...
    grid-column: -1 / -2;
}

자동 채우기와 자동 맞춤 키워드의 차이점

두 키워드의 주요 차이점은 트랙 축소에 있습니다. 축소된 트랙은 주어진 차원에서 공간을 차지하지 않는 트랙입니다. auto-fill 키워드를 사용하면 내부에 그리드 항목이 포함되어 있지 않더라도 트랙이 축소되지 않습니다.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.container {
    ...
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

모든 트랙의 너비가 0이 아닌 것을 확인하십시오. 이 동작은 그리드 항목이 포함된 트랙 수에 관계없이 변경되지 않습니다.

축소할 그리드 항목 없이 자동 맞춤 키워드 강제 트랙을 사용합니다. 점유된 트랙은 해당 정의에서 허용하는 최대 가능한 크기를 사용합니다. 이는 비점유 트랙의 크기에 의해 크기가 제한되지 않기 때문에 가능합니다.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.container {
    ...
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

축소된 열은 보이지 않더라도 그리드의 일부로 존재합니다(여기서는 그리드의 오른쪽에 있음).

두 번째 인수의 유형에 대한 제한.

auto-fill/auto-fit 키워드와 함께 repeat() 함수를 사용하면 두 번째 인수의 유형이 제한됩니다. 허용된 유형은 허용된 유형의 그룹fixed-size에 속해야 합니다. mdn<fixed-size>에 따르면 다음과 같은 형식을 취할 수 있습니다.

length-percentage 값

다음을 포함하는 minmax() 함수:

length-percentage 값으로 주어진

min

최대값은 length-percentage 값, flex 값 또는 min-content , max-content 또는 auto 키워드 중 하나로 제공됩니다.

다음을 포함하는 minmax() 함수:

min은 length-percentage 값 또는 min-content , max-content 또는 auto 키워드 중 하나로 지정됩니다.

length-percentage 값으로 주어진 최대값

그리드 정의에서 반복 기능의 다중 사용.

여러 repeat() 함수 호출을 사용하여 주어진 차원에서 격자 구조를 정의할 수 있습니다. 그러나 첫 번째 호출에서 auto-fill/auto-fit 키워드를 첫 번째 인수로 사용하는 경우 후속 호출은 repeat(<integer>, <fixed-size>) 패턴을 사용해야 합니다.

/* Valid: */
repeat(auto-fit, 100px), repeat(3, 20%)
repeat(auto-fill, 10%, repeat(10, minmax(100px, 500px))

/* Invalid: */
repeat(auto-fit, minmax(100px, 1fr)) repeat(auto-fill, 70%)
repeat(auto-fill, minmax(min-content, 100px)) repeat(auto-fit, 1fr);  

짧은 글 읽어주셔서 감사합니다. 이와 같은 더 많은 콘텐츠를 읽고 싶다면 내 dev.to 또는 계정을 팔로우할 수 있습니다. 또한 어떤 형태로든 피드백을 제공해주세요. 나는 당신의 의견을 읽고 싶습니다. 다음 기사에서 곧 만나요!


추신. 제 작업을 지원하고 싶다면 커피 한 잔에 감사하겠습니다. 고맙습니다. ❤️