<nav><a href="">One</a>
  <a href="">Two</a>
  <a href="">Three</a>
  <a href="">Four</a>

</nav>
nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 
  if we did this instead of the template it would be a problem:
  grid-auto-flow: column;
  */
  font: 120% system-ui;
  text-align: center;
  padding: 2rem 1rem;
}
a {
  text-decoration: none;
  color: black;
}
a:hover {
  font-weight: 900;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.