CSS 그리드: 반복 기능 - 기초

여보세요. 오늘은 CSS Grid의 마지막 기능인 반복 기능에 대해 이야기하려고 합니다. 이 단순하지만 강력한 도구를 사용하면 복잡한 레이아웃을 구축할 때 작업이 훨씬 쉬워집니다. 뛰어들자!

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

기능 정의.

이 함수는 grid-template-columns 또는 grid-template-rows CSS 속성 값으로만 ​​사용할 수 있습니다. 단일 속성에서 여러 번 사용할 수 있습니다.

grid-template-columns: repeat(...) repeat(...);

함수는 두 개의 인수를 사용합니다: 양수 또는 두 개의 특수 키워드(자동 채우기 또는 자동 맞춤) 중 하나. 첫 번째 인수의 유형에 따라 두 번째 인수 및 최종 결과에 사용할 수 있는 값이 결정됩니다. 따라서 이 문서는 숫자 인수에만 전념합니다. 자동 채우기 및 자동 맞춤 키워드의 사용은 좀 더 복잡한 주제이며 별도의 기사가 필요합니다.

grid-template-rows: repeat(10, ...) repeat(5, ...);

두 번째 인수의 값은 grid-template-columns/grid-template-rows CSS 속성 값과 정확히 동일한 구문을 사용합니다. 즉, 그리드 선 이름과 함께 트랙 크기(길이 유형, 백분율, fr 단위, 크기 조정 키워드 또는 크기 조정 함수와 같은)를 정의하는 데 사용되는 모든 방법의 조합을 사용할 수 있습니다. 미리 알림으로 내 이전 중 하나를 확인할 수 있습니다.

grid-template-rows: repeat(3, 1fr 10px 20% auto fit-content(10px));

grid-template-columns: repeat(2, [first] 1px [second, abcd] 1fr);

결과 값은 매우 간단합니다. 두 번째 인수에 첫 번째 인수를 곱한 것입니다.

grid-template-columns: repeat(3, 1fr 50px);

is equivalent to:

grid-template-columns: 1fr 50px 1fr 50px 1fr 50px;

grid-template-columns: repeat(2, [a] 100px [b] 50px [c]);

is equivalent to:

grid-template-columns: [a] 100px [b] 50px [a, c] 100px [b] 50px [c];

그리드 선 이름이 그리드 선에 어떻게 적용되는지 확인합니다.


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


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