CSS 그리드 - 버튼 클릭시 그리드 영역 숨기기

Question

버튼 클릭으로 표시하거나 숨길 수있는 사이드 라벨을 만들려고합니다. 레이아웃에 grid-area 및 grid-template-areas을 사용했습니다. 나는 sidenav에 grid-area을 가지고 있습니다. sidenav가 숨겨져있을 때 grid-area도 숨기고 싶습니다. 이것을 달성 할 수 있습니까?

$("a").on("click", function() { 
 
    $("#sidenav").hide(); 
 
    return false; 
 
});

#header { 
 
    grid-area: header; 
 
    border: 1px solid red; 
 
} 
 

 
#sidenav { 
 
    grid-area: sidenav; 
 
    border: 1px solid green; 
 
} 
 

 
#content { 
 
    grid-area: content; 
 
    border: 1px solid black; 
 
} 
 

 
body { 
 
    display: grid; 
 
    grid-gap: 10px; 
 
    grid-template-columns: 0.5fr 2fr; 
 
    grid-template-areas: "header header" "sidenav content" 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="header"> 
 
    <a href="#">Click me</a> 
 
</div> 
 
<div id="sidenav"> 
 
    <ul> 
 
    <li> menu 1</li> 
 
    <li> menu 2</li> 
 
    <li> menu 3</li> 
 
    </ul> 
 
</div> 
 
<div id="content"> 
 
    Some content goes here.... 
 
</div>

Answer 1

https://codepen.io/devi_ks/pen/Ebddwo 당신은 그리드 영역을 사용하므로 사이드 탐색의 장소는 시작 alocated있다 -

전체 코드

가 여기에있다. 사이드 - 네비게이션을 숨기거나 (심지어 삭제해도) 이것에 대해서는 아무 것도 바뀌지 않습니다. 약간의 트릭을해야만했습니다 :
첫 번째 열의 열을 0으로 설정하고 그리드 간격을 변경하십시오. 그렇지 않으면 왼쪽에 (필요하지 않은) 갭이 있기 때문에 그리드 간격을 변경하십시오.

$("a").on("click", function(){ 
    $("#sidenav").hide(true); 
    $("body").css("grid-template-columns", "0px 2fr"); 
    $("body").css("grid-gap", "10px 0px "); 
    return false; 
}); 

Answer 2

$("a").on("click", function(){ 
    if($("#sidenav").is(":visible")){ 
     $("#sidenav").hide(); 
     $("#content").hide(); 
    }else{ 
     $("#sidenav").show(); 
     $("#content").show(); 
    } 
     return false; 
    });