CSS Grid Nav Bar With Content Width Columns, Middle Column Contains Menu

CssGridNav.css

.grid {
  // adjust to hit around 60px for usable click target sizes
  max-height: 4em;
  display: grid;
  // snap column width to element sizes
  grid-template-columns: repeat(3, auto);
  // vertical center items
  align-items: center;
  // distribute outer elements to edges and inner within
  justify-content: space-between;
}

.logo {
  // responsive img width, won't overflow also 
  max-width: 100%;
  // so we only have to define height on the container and it stays within bounds proportionally
  max-height: inherit;
}

.menu-container {
  max-height: 4em;
  display: grid;
  grid-template-columns: auto;
  // create cols to adjust to number of menu items automatically  
  grid-auto-flow: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-container li {
  text-align: center;
  padding: 1em;
}


/*
Expected HTML

<div class="grid">
  <img class="logo" src="https://cdn4.buysellads.net/uu/1/49556/1564610849-Atlas_Carbon_Ad_1.png" />
  <ul class="menu-container">
    <li>Categories</li>
    <li>Map</li>
    <li>Starter</li>
  </ul>
  <button class="main-interaction">Login</button>
</div>

*/