a {
  text-decoration: none;
}

.topmenu {
  display: flex;
  flex-wrap: wrap;
  max-width: max-content;
  margin: auto;
  background-color: blue;
  padding: 6px;
}

.topmenu>* {
  padding: 10px;
  background-color: yellow;
  margin-left: 5px;
  margin-right: 5px;
}

.gridmenu {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fill, max-content);
  max-width: max-content;
  margin: auto;
  background-color: purple;
  padding: 6px;
}

.gridmenu>* {
  padding: 10px;
  background-color: yellow;
  margin-left: 5px;
  margin-right: 5px;
}

.grid2 {
  display: grid;
  grid-auto-flow: column;
  /* grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); */
  grid-template-columns: repeat(auto-fill, max-content);
  /* justify-content: center; */
  /* align-items: center; */
  /* max-width: max-content; */
  margin: auto;
  background-color: orange;
  padding: 6px;
}

.grid2>* {
  background-color: yellow;
  padding: 10px;
}

.grid3 {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(max-content, max-content)); */
  background-color: green;
  padding: 6px;
}

.grid3>* {
  background-color: yellow;
  max-width: max-content;
}

/* Works, but requires fixed min width */
.grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background-color: blue;
  padding: 6px;
}

.grid4>* {
  background-color: yellow;
  max-width: max-content;
}