<p>(Dashed line is meant to be the container)</p>

<nav class="grid three-column">

  <a href="" class="nav-item">Veggies</a>

  <a href="" class="nav-item">Meats</a>

  <a href="" class="nav-item">Purchase items now</a>

</nav>

.grid {

/*  display: grid; */

}

​

.three-column {

/*  grid-template-columns: 1fr 1fr 1fr; */

/*  grid-auto-flow: row; */

}

​

.nav-item {

}

​

​

​

​

​

​

​

​

​

​

​

​

/* Material below this is used to make the live demo work */

.nav-item {

  background-color: #BBB;

  color: white;

  padding: 0.75rem 1rem;

  font-size: 1.5rem;

  display: inline-block;

}

​

.nav-item:nth-of-type(1) {

  background-color: rgb(200,50,50);

}

​

.nav-item:nth-of-type(2) {

  background-color: rgb(50,200,200);

}

​

.nav-item:nth-of-type(3) {

  background-color: rgb(200,50,200);

}

​

.nav-item:hover, .nav-item:focus {

  background-color: #333;

  text-decoration: none;

}

​

.grid {

  position: relative;

  height: 160px;

  width: 200px;

  overflow: scroll;

  resize: both;

  font-size: 1em;

  line-height: 1.45em;

  color: white;

  font-family: sans-serif;

  border: 2px dashed black;

}

​