Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a responsive navigation menu using CSS Grid?
Asked on Apr 09, 2026
Answer
Creating a responsive navigation menu with CSS Grid involves defining a grid layout that adapts to different screen sizes. Here's a simple example to demonstrate this approach.
<!-- BEGIN COPY / PASTE -->
<nav>
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<style>
.nav-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.nav-menu li a {
text-decoration: none;
padding: 10px;
background-color: #007bff;
color: white;
text-align: center;
display: block;
}
@media (max-width: 600px) {
.nav-menu {
grid-template-columns: 1fr;
}
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The navigation menu uses CSS Grid to create a flexible layout with four columns.
- The "grid-template-columns: repeat(4, 1fr);" rule divides the menu into four equal parts.
- A media query adjusts the grid to a single column layout for screens smaller than 600px.
- Ensure that the links are styled to be visually distinct and accessible.
Recommended Links:
