How to put an unordered list in css grid?

Question

I recently started learning css grid and I don't know how I should put an unordered list, with a couple tags inside it, in css grid.

I want the list to fit in the grid created by the showcase class, but it doesn't work.

This is the code snippet:

.showcase {
  grid-area: showcase;
  background-image: url("../pics/flower.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-columns: 50px 300px repeat(4, 50px) 300px 70px 10px 70px 1fr;
  grid-template-rows: 50px 3fr 2fr;
}

#navigation a {
  display: grid;
  grid-column: 3/7;
  grid-row: 1/2;
}

<div class="showcase">
  <nav>
    <ul id="navigation">
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">Treatment</a></li>
      <li><a href="#">The Lab</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    <p>Call us: 123-456-7890</p>
    <button type="button">Book Now</button>
  </nav>
</div>