CSS 그리드 컨테이너에 손주를 직접 배치할 수 있나요?

Grid 컨테이너에 직접 손자를 배치할 수 있습니까?

CSS 그리드 레이아웃의 개념은 일반적으로 그리드에 배치되는 그리드 요소의 직계 하위 항목을 중심으로 진행됩니다. 하지만 그리드 구조 내에 손자를 배치하려면 어떻게 해야 할까요? 이것이 논리적으로 이해가 됩니까?

"display: subgrid" 이해

CSS 그리드 레벨 2에는 그리드 컨테이너가 중첩된 요소에 영향력을 확장할 수 있는 "display: subgrid" 속성이 도입되었습니다. 이 속성은 다음과 같습니다.

• 요소 내에 하위 그리드를 생성하여 특수한 유형의 그리드 컨테이너로 만듭니다.
• 상위 그리드에서 그리드 트랙을 상속합니다.
• 하위 그리드 허용 상위 그리드의 크기 조정에 참여하기 위한 하위 그리드의

구현 상태

안타깝게도 주요 브라우저에서는 아직 display: subgrid가 구현되지 않았습니다. 이러한 제한으로 인해 이 속성을 사용하여 그리드 컨테이너에 손자를 효과적으로 배치할 수 없습니다.

CSS 그리드 구조의 제한

CSS 그리드 내에서는 컨테이너의 직계 하위 항목만 그리드 항목이 될 수 있으며 그리드 속성을 활용합니다. 즉, 손자는 중첩이나 대체 방법을 사용하여 위치를 지정해야 합니다.

가능한 해결 방법

디스플레이: 그리드 항목의 그리드

디스플레이 설정: 그리드 항목의 그리드는 일부 제한된 기능을 달성할 수 있지만 이 접근 방식은 표시와 완전히 유사하지는 않습니다. subgrid.

Display:contents

또 다른 잠재적 해결 방법은 상위 항목의 그리드 레이아웃을 상속할 수 있는 display:contents를 활용하는 것입니다. 이 기술은 다음과 같은 리소스에 자세히 설명되어 있습니다.

• [CSS 서브그리드의 대안은 무엇입니까?](https://stackoverflow.com/questions/42374779/what-is-an-alternative-to -css-subgrid)

추가 정보

이 주제에 대해 더 자세히 알아보려면 다음 리소스를 참조하세요.

• [하위 그리드 설명](https://blogs.igalia.com/mrego/2016/02/ 12/subgrids-thinking-out-loud/)
• [Mozilla Bugzilla: 디스플레이: subgrid Not 시행](https://bugzilla.mozilla.org/show_bug.cgi?id=1240834)

위 내용은 CSS 그리드 컨테이너에 손주를 직접 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!