CSS-Gitter - Verstecke einen Gitterbereich auf Knopfdruck

Question

Ich versuche ein Sidénav zu erstellen, das auf Knopfdruck ein- und ausgeblendet werden kann. Ich habe grid-area und grid-template-areas für das Layout verwendet. Ich habe eine grid-area für sideNav. Ich möchte die grid-area auch ausgeblendet werden, wenn das Sitenav versteckt ist. Ist es möglich, dies zu erreichen? hier

Der vollständige Code ist - https://codepen.io/devi_ks/pen/Ebddwo

$("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

Sie verwenden Raster-Bereich, so dass der Ort von der Seite-nav wird beim Start alocated. Wenn Sie das Side-Nav verstecken (oder auch löschen), ändert sich daran nichts. Sie mussten einen kleinen Trick machen:
Setzen Sie die Spalte für die erste Spalte auf 0 und ändern Sie die Grid-Lücke, weil Sie sonst auf der linken Seite die (nicht benötigte) Lücke haben.

$("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; 
    });