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

소개

행이 교대로 표시되는 쉬운 그리드를 만드는 방법을 보여주는 간단한 데모입니다. 이 예에는 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;
}
</integer>

항목의 경우 --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;
}
</integer></integer>

---

결론

이런 종류의 그리드를 작동하는 방법을 이해하는 데 도움이 되기를 바랍니다.
오류를 발견하시거나 피드백이 있으시면 이 게시물에 댓글을 남겨주세요!

감사합니다. 즐거운 주말 보내세요
쿠라이카리

---

오리지널 펜

---

항목 속성이 있는 펜

위 내용은 교대로 행이 있는 단순 그리드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!