CSS 그리드의 서식 지정 컨텍스트는 얼마나 멀리까지 도달합니까?

그리드 컨테이너 범위 제한

CSS 그리드에서 형식 지정 컨텍스트는 그리드 컨테이너 내의 상위-하위 관계로 제한됩니다. 그리드 속성은 직계 하위 항목에만 적용됩니다.

다음 예를 고려하세요.

<ul>

여기에서 orgChartLevel1은 그리드 컨테이너이고 orgChartLevel1a, orgChartLevel2 및 orgChartLevel2b는 해당 범위 내의 하위 항목입니다.

그러나 다음과 같은 그리드 컨테이너의 하위 요소인 요소는 orgChartLevel2b는 그리드 형식화 컨텍스트 외부에 있습니다. 이러한 요소에 적용된 그리드 속성은 작동하지 않습니다.

해결책

깊게 중첩된 요소에 그리드 속성을 적용하려면 다음 중 하나를 수행해야 합니다.

<ul>

디스플레이: 그리드 또는 디스플레이: 인라인 그리드를 그리드 컨테이너 내의 상위 항목에 적용합니다.

제거 그리드 컨테이너와 그리드 속성을 적용하려는 요소 사이의 래퍼 요소.

참고

<ul>

그리드 항목은 그리드 컨테이너일 수도 있습니다. .

플렉스 및 그리드 중첩에 대한 자세한 내용은 아래 추가 리소스를 참조하세요. containers.

관련 읽기:

<ul>

상위 그리드 컨테이너에 깊이 중첩된 요소 배치

flex 속성의 올바른 사용 플렉스 컨테이너를 중첩할 때

CSS를 중첩하는 것은 나쁜 습관인가요? 그리드?

위 내용은 CSS 그리드의 서식 지정 컨텍스트는 얼마나 멀리까지 도달합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!