`display: subgrid`는 CSS 그리드 내에서 손자를 어떻게 배치합니까?

하위 그리드 기능: 그리드 내에서 손자 위치 지정

CSS 그리드에서 요소는 일반적으로 그리드 컨테이너의 직계 하위 요소입니다. 그러나 "display: subgrid" 속성이 도입되면서 개발자는 그리드 자체에 그리드의 손자 요소를 배치할 수 있습니다.

Display: Subgrid가 무엇인가요?

display: subgrid 속성은 그리드 항목 내에 하위 그리드 컨테이너를 생성합니다. 이 하위 그리드는 상위 그리드 정의를 상속할 수 있으므로 그 안에 있는 그리드 항목이 상위 그리드의 그리드 선에 정렬될 수 있습니다.

디스플레이 사용: 하위 그리드

상위 그리드에 손자 요소를 배치하고 상위 요소를 "display: subgrid"로 설정한 다음 필요한 그리드 속성을 지정합니다. 그런 다음 하위 요소를 하위 그리드 내의 그리드 항목으로 설정합니다.

예:

<div class="wrapper">
  <div class="parent-grid">
<p>이 예에서 "parent-grid" 요소는 "display: subgrid"이고 두 개의 열이 있습니다. "child-grid" 요소는 상위 그리드 내의 하위 그리드이며 두 개의 행을 갖습니다. "손자 요소"는 하위 그리드 내의 그리드 항목입니다.</p>
<p>결과적으로 요소 A, B, C는 각각 상위 그리드에서 자신의 행을 차지합니다.</p>
<p><strong>브라우저 지원</strong></p>
<p>디스플레이: 하위 그리드는 여전히 CSS 그리드 사양에서 제안된 기능이며 주요 분야에서는 아직 널리 지원되지 않습니다. 브라우저. Firefox Nightly 및 Microsoft Edge(플래그 포함)에서 사용할 수 있습니다.</p>
</div>
</div>

위 내용은 `display: subgrid`는 CSS 그리드 내에서 손자를 어떻게 배치합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!