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 29, 2026
Answer
Creating a responsive navigation menu with CSS Grid involves defining a grid layout that adapts to different screen sizes. This approach allows you to easily manage the layout of navigation items.
<!-- 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(auto-fit, minmax(100px, 1fr));
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.nav-menu li {
text-align: center;
}
.nav-menu a {
display: block;
padding: 10px;
background-color: #007bff;
color: white;
text-decoration: none;
}
.nav-menu a:hover {
background-color: #0056b3;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The "grid-template-columns" property uses "repeat(auto-fit, minmax(100px, 1fr))" to create a flexible grid that adjusts the number of columns based on available space.
- "auto-fit" allows the grid to automatically adjust the number of columns to fit the container.
- "minmax(100px, 1fr)" ensures each grid item is at least 100px wide but can grow to fill the available space.
- This setup makes the navigation menu responsive, adapting to various screen sizes without additional media queries.
Recommended Links:
