title: Css Grid and Hamburger Menu
body: <p>im learning css in general and i am failling very, - v e r y - hard at it...</p>
  
  <p>im trying to do a simple thing with my css grid, just animate the hidden menu right to left, instead of left to right, but i dont know what i must change to do it..</p>
  
  <p>Can you guys help me? Here the fiddle: <a href="https://jsfiddle.net/xwvL2a70/" rel="nofollow noreferrer">https://jsfiddle.net/xwvL2a70/</a></p>
  
  <pre><code>/* grid */
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
  
  /* items */
  .container &gt; * {
    color: #353535;
    font-size: 1.2em;
    line-height: 1.5;
    padding: 20px;
    background: #d0cfc5;
  }
  
  /* nav styles */
  .container nav {
    background: #136fd2;
  }
  
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav a {
    color: #d0cfc5
  }
  
  nav a:hover {
    text-decoration: none;
  }
  
  /* media query for grid layout */
  @media only screen and (min-width: 600px) {
  
    /* grid */
    .container {
      grid-template-columns: repeat(4, 1fr);
    }
  
    /* specific item styles */
    .container header,
    .container nav,
    .container footer {
      grid-column: span 4;
    }
    .container section {
      grid-column: span 3;
    }
  
    /* nav styles */
    nav ul li {
      display: inline-block;
      padding: 0 20px 0 0;
    }
  
    /* hide toggle */
    .toggle {
      display: none;
    }
  
  }
  
  /* media query for nav styles */
  @media only screen and (max-width: 599px) {
  
      #nav {
        transition: transform .3s ease-in-out;
        top: 0;
        bottom: 0;   
        min-height: 100vh; /* override Safari bug */
        position: fixed; /* or choose `absolute` depending on desired behavior*/
        width: 300px;
        left: -340px;
      }
  
      #nav:target {     
        transform: translateX(340px);
      }
  
      .close {
        text-align: right;
        display: block;
        text-decoration: none;
        font-size: 3em;
        position: relative;
        top: -30px;
      }
  
    .open {
      text-align: left;
    }
  
  }
  </code></pre>