<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.