탐색 요소는 디스플레이의 영향을 받지 않습니다: 그리드

Question

그리드 표시로 설정된 탐색 모음에 일부 ul li 요소가 있지만 예상한 대로 작동하지 않습니다. li 요소는 그리드가 적용되지 않은 것처럼 나타납니다.

코드는 다음과 같습니다:

으아아아 으아아아

하지만 nav 대신 ul 요소에 grid-container 클래스를 적용하면 제대로 작동합니다.

차이점을 설명해 주실 수 있나요? 탐색을 표시: 그리드로 설정하려면 어떻게 해야 합니까?

Answer 1

nav에는 하위 요소(ul)가 하나만 있으므로 (display:grid)의 효과는 ul에만 나타납니다. li를 그리드 상자로 처리하려면 nav 대신 ul에 클래스(grid-container)를 추가해야 합니다. 정확한 효과를 얻으려면

디스플레이 그리드의 효과는 하위 요소에만 나타나므로, li는 nav의 하위 요소가 아니기 때문에 nav에 디스플레이 그리드를 추가하고 li에 대한 효과를 볼 수 없다는 점을 기억하세요

다음 코드를 참고해주세요

으아아아 으아아아