암시 적 그리드, 반복 가능한 레이아웃 패턴 및 댄 글러

Dave Rupert는 현대 CSS를 사용하여 클래식 퍼즐을 해결합니다. 구성 요소의 CSS가 우리가 제공하는 것을 처리 할 수 ​​없을 때 어떻게됩니까?

구체적으로, 레이아웃 그리드가 짝수의 항목을 기대하지만 실제로 홀수의 항목을 제공 할 때. 마지막으로 남은 "배고픈"요소는 레이아웃을 파괴합니다. 이를 위해서는 수비 CSS가 필요합니다. Dave는 그렇게했습니다.

그는 다음을 사용하여 간결한 선택기를 썼습니다.

 <code>.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }</code>

다음과 같이 분해 :

• 우리는 .items라는 부모 컨테이너가 있습니다.
• 컨테이너가있는 경우 : () a .item child 요소가있는 경우, 그것은 마지막 유형입니다.
• ... 그리고 .item은 이상한 인스턴스입니다.
• ... 그런 다음 해당 유형의 첫 번째 요소를 선택하고 스타일을 유지하십시오!

이 경우, 마지막 .item을 전체 너비로 설정하여 레이아웃에 공극이 존재하지 않도록 할 수 있습니다.

만약 ... 그런 다음 ... CSS는 조건부 로직 기능을 가지고 있습니다! 현재 우리는 Safari TP 및 Edge/Chrome Canary 지원에 대해서만 이야기하고 있지만 이미 훌륭합니다.

Temani Afif는 최근에 암시 적 메쉬를 실험 할 때 배운 팁을 공유했습니다. CSS Grid의 자동 배치 알고리즘을 활용하면 그리드에 대한 고정 된 수의 열과 행을 명시 적으로 선언 할 필요조차 없습니다. CSS는 필요한 경우 우리를 위해 만들게됩니다!

아니요, Temani의 속임수는 Dave의 "Hungry"퍼즐에 대한 대안이 아닙니다. 그러나 Temani의 반복 가능한 메쉬 레이아웃 모드에 대한 Temani의 접근 방식을 Dave의 방어 CSS 사용과 다음과 결합하여 ()는 가볍고 균형 잡힌 반복 가능한 모드를 유지하면서 가볍고 여러 항목을 처리 할 수있는 강력하고 복잡한 메쉬를 얻습니다.

위 내용은 암시 적 그리드, 반복 가능한 레이아웃 패턴 및 댄 글러의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!