깊게 중첩된 요소에 CSS 그리드 속성을 어떻게 적용할 수 있나요?

그리드 컨텍스트 및 중첩 요소

CSS 그리드에서 그리드 속성은 상위-하위 관계 내의 요소로 제한됩니다. 이는 그리드 속성의 적용 가능성을 그리드 컨테이너의 직접 하위 요소로 제한합니다.

중첩 그리드 예

깊이 중첩된 그리드를 배치하려고 시도하는 시나리오를 고려해 보세요. 그리드 컨테이너를 나타내는 최상위 ul에 적용된 그리드 속성을 사용하는 li 요소:

#orgChart ul.orgChartLevel1 {
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: 100px auto auto;
  grid-row-gap: 30px;
}

#orgChart li.orgChartLevel2b {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

이 예에서 li.orgChartLevel2b 요소는 ul.orgChartLevel1의 자손이지만 직접적인 하위 요소는 아닙니다. 따라서 ul.orgChartLevel1에 정의된 그리드 속성은 li.orgChartLevel2b에 적용되지 않습니다.

해결책: 상위-하위 관계 설정

깊게 중첩된 그리드 속성을 적용하려면 요소의 경우 스타일을 지정하려는 요소와 그리드 컨테이너 사이에 상위-하위 관계를 설정해야 합니다. 이는 다음 중 하나를 통해 수행할 수 있습니다.

• 그리드 컨테이너와 원하는 요소 사이의 상위 요소에 디스플레이: 그리드 또는 디스플레이: 인라인 그리드를 적용합니다.
• 중간 래퍼 요소 제거 부모-자식 관계를 차단하는 요소입니다.

그리드 내의 그리드 컨테이너에 대한 참고 사항 항목

그리드 항목 자체가 그리드 컨테이너가 될 수 있다는 점에 유의하는 것이 중요합니다. 이러한 경우 그리드 레이아웃 속성은 그리드 컨테이너로 정의된 그리드 항목의 범위 내에서 적용됩니다.

위 내용은 깊게 중첩된 요소에 CSS 그리드 속성을 어떻게 적용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!