교대로 행이 있는 단순 그리드-CSS 튜토리얼-php.cn

교대로 행이 있는 단순 그리드

Linda Hamilton

풀어 주다： 2024-12-08 16:23:10

원래의

737명이 탐색했습니다.

Simple Grid With Alternating Rows

소개

행이 교대로 표시되는 쉬운 그리드를 만드는 방법을 보여주는 간단한 데모입니다. 이 예에는 3개 항목이 포함된 행 1개와 2개 항목이 포함된 행 1개가 있습니다.
이는 100% CSS 솔루션이며, 결국 Grid-columns 속성의 범위 값에 @property를 사용하게 됩니다.

작동 원리

그럼 간단해요. 얼마나 많은 행이 있을 것인지, 그리고 각 행에 포함된 총 항목 수를 알아야 합니다.

제 예에서는 다음과 같습니다.

2개의 다른 행
3개 항목 2개 = 5개 항목

즉, :nth-child() 선택기를 수행할 때 해당 총 개수를 사용해야 함을 의미합니다.

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --col-span: 4;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --col-span: 6;
}

로그인 후 복사

col-span 사용자 정의 속성은 다음과 같이 사용됩니다.

.item {
    ...
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    ...
}

로그인 후 복사

그게 다입니다. 매우 간단하고 중요하지 않지만 모든 사람에게 여전히 유용합니다.

더욱 디자이너 친화적이지만 더욱 복잡한 솔루션

보다 디자이너 친화적인 솔루션을 위해 범위를 변경하는 대신 항목의 실제 양을 선언하는 방법을 생각했습니다. 왜냐하면 그리드의 열 수를 변경했지만 범위 조정을 잊어버리면 바람직하지 않은 효과가 발생하기 때문입니다. 그래서 다른 사용자 정의 속성을 추가하고 대신 변경했습니다.

가장 안타까운 부분은 어떤 솔루션을 선택하든 n번째 하위 선택기를 수동으로 변경해야 하거나 완전히 동적 솔루션을 원하는 경우 JavaScript를 통해 변경해야 한다는 점입니다. (SASS / SCSS를 사용할 수도 있는데 이는 분명히 좋은 방법입니다.)

새로 추가된 속성은 다음과 같습니다.

@property --row-items {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

로그인 후 복사

항목의 경우 --row-items 속성 값을 변경할 수 있습니다

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --row-items: 3;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --row-items: 2;
}

로그인 후 복사

이제 x를 선택하는 대신 스팬-콜이 .item 클래스에서 직접 계산됩니다.

.item {
    --span-cols: calc(var(--grid-cols) / var(--row-items));
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
}

로그인 후 복사

참고로 열과 행 사용자 정의 속성은 다음과 같이 선언됩니다.

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

로그인 후 복사