그리드 컨테이너 내에 반응 형 탐색 메뉴를 만들려면 어떻게해야합니까?

Question

나는 간단한 탐색 내가 링크는 크기를 조정할 경우 (수평) 사용자 장치에 따라 반응 할 할

<nav> 
    <ul> 
    <li><a href="">Home</a></li> 
    <li><a href="">About</a></li> 
    <li><a href="">Contact</a></li> 
    </ul> 
</nav> 

에게 있습니다. 이 탐색은 그리드 컨테이너의 서브 그리드 컨테이너 (.class {display : subgrid;}는 버그로 사용되지 않음) 내에 편안하게 놓여 있습니다.

.ul { 
    display: grid; 
    grid-template-areas: "home about contact"; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: 25%; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

grid-template-areas 적절히 선언 : 다음과 같은 아 격자 (NAV) 컨테이너

.container { 
    grid-template-areas: 
    "header header header header" 
    "nav nav nav nav" 
    "main main main main" 
    "footer footer footer footer" 
} 

CSS는 다음과 같이 격자 용기

CSS는

.home {grid-area: home;} 
.about {grid-area: about}; 
.contact {grid-area: contact}; 

나는 이것, 특히 grid-template-areas에 대해 몇 가지 질문을했다. 지금은 진전없는 시간. subgrid container을 모두 스크랩해야하는지 확실하지 않거나 간과 할 수있는 간단한 단계가있는 경우 잘 모르겠습니다.

도움을 주시면 감사하겠습니다.

Answer 1

전체 레이아웃에 CSS 그리드를 사용하는 것이 좋습니다.

간단한 탐색 메뉴로 CSS Grid를 사용하면 효과적이지만 지나치게 길 수도 있습니다. 목표를 달성하는 간단한 방법이 있습니다 : Flexbox.

nav { 
 
    display: flex; 
 
    height: 50px; /* non-essential; for demo only */ 
 
} 
 

 
/* non-essential; for demo only */ 
 
a { 
 
    flex: 1; 
 
    border: 1px solid gray; 
 
    background-color: lightgray; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-decoration: none; 
 
}

<nav> 
 
    <a href="">Home</a> 
 
    <a href="">About</a> 
 
    <a href="">Contact</a> 
 
</nav>

예를 들어

Answer 2

하면 다음과 같은 HTML 네비게이션 바 : 당신은 설정하는 규칙을 사용할 수

<nav class="nav-menu"> 
    <a>Item 1</a> 
    <a>Item 2</a> 
    <a>Item 3</a> 
</nav> 

는 플렉스 컨테이너 당신의 nav 그리드 항목을 확인 다른 너비

.nav-menu { 
    display: flex; 

    a { 
     width: 25px; 
    } 
} 

@media screen and (max-width: 500px) { 
    .nav-menu a { 
     width: 20px; 
    } 
} 

@media의 새로운 너비가 화면 크기가 500px보다 큰 경우 이전에 할당 된 너비로 바뀝니다.