CSS 그리드에 손자를 직접 배치할 수 있습니까? 그리고 방법은 무엇입니까?

CSS 그리드: 그리드에 "손자"를 배치할 수 있습니까?

많은 CSS 그리드 가이드는 그리드에 배치된 요소가 위치하는 구조를 암시합니다. 그리드 요소의 직계 자식. 그러나 그리드 자체에 "손자" 요소를 직접 배치해야 할 때 발생할 수 있습니다.

"하위 그리드"의 필요성

상위 그리드, 상위 컨테이너 및 하위 요소가 있는 경우 그리드 내의 해당 행에 각 하위 요소를 배치할 수 있습니다. 이것이 그리드 용어로도 이해가 될까요?

Enter: display: subgrid

CSS Grid Level 2 초안 사양에서 디스플레이: subgrid의 개념을 소개합니다. 그리드 항목에 적용되는 display: subgrid를 사용하면 항목의 그리드 속성을 무시하면서 항목의 하위 항목이 컨테이너 그리드의 레이아웃을 상속할 수 있습니다.

이 기능은 아직 브라우저에서 널리 구현되지 않았습니다. 그러나 "손자" 위치 지정 문제에 대한 잠재적인 솔루션을 제공합니다.

현재 대안

display: subgrid에 대한 지원을 기다리는 동안 대체 접근 방식이 존재합니다.

• 표시 사용: 그리드 항목 위에 그리드(제한 사항 있음) 존재).
• 디스플레이 사용: 그리드 선을 수직으로 상속하는 콘텐츠.

추가 리소스

• [CSS란 무엇입니까? 표시하다: 하위 그리드?](https://developer.mozilla.org/en-US/docs/Glossary/display)
• [CSS 그리드 레벨 2의 하위 그리드](https://blogs.igalia.com/mrego /2016/02/12/subgrids-thinking-out-loud/)
• [display: 항목 정렬을 위한 하위 그리드 손자 컨테이너](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

위 내용은 CSS 그리드에 손자를 직접 배치할 수 있습니까? 그리고 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!