현대적인 CSS 마술과 함께하는 Dave Rupert 이는 고전적인 수수께끼 중 하나를 해결합니다. 구성 요소용 CSS가 우리가 던진 콘텐츠를 처리할 수 없으면 어떻게 될까요?
특정 상황은 레이아웃 그리드가 짝수개의 항목을 예상하지만 대신 홀수가 제공되는 경우입니다. 레이아웃을 버리는 "dangling" 요소가 끝에 남습니다. 필요한 것은 일부인 것 같습니다. 방어적인 CSS 그리고 데이브는 그것을 성취합니다.
그는 도달 :has() 홀수 수의 항목을 포함하는 그리드의 마지막 항목을 스니핑하는 멋진 선택기를 작성하려면 다음을 수행하십시오.
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }그것을 분해:
- 부모 컨테이너가 있습니다.
.items. - 컨테이너의 경우
:has()an.item그 유형의 마지막인 아이, - … 그리고
.item홀수 인스턴스가 발생합니다. - ...그런 다음 첫 번째 선택
.item해당 유형의 요소와 스타일을 지정하십시오!
이 경우 마지막으로 .item 레이아웃의 구멍을 방지하기 위해 전체 너비로 이동하도록 설정할 수 있습니다.
If… then… CSS에는 조건부 논리 능력이 있습니다! 현재로서는 Safari TP 및 Edge/Chrome Canary에 대한 지원에 대해서만 이야기하고 있지만 이는 매우 훌륭합니다.
Temani Afif는 최근에 배운 트릭을 공유했습니다. 암시적 그리드 실험. CSS Grid의 자동 배치 알고리즘을 활용하면 그리드에 대해 고정된 수의 열과 행을 명시적으로 선언할 필요도 없습니다. 필요한 경우 CSS에서 생성해 드립니다!
아니요, Temani의 기술은 Dave의 "매달자" 딜레마에 대한 대안 솔루션이 아닙니다. 그러나 반복 가능한 그리드 레이아웃 패턴에 대한 Temani의 접근 방식을 Dave의 방어적인 CSS 사용과 결합하면 :has(), 우리는 균형 잡히고 반복 가능한 패턴을 유지하면서 가볍고 많은 항목을 처리할 수 있는 매우 강력하고 복잡해 보이는 그리드를 얻습니다.
