How to add a responsive CSS NavBar using CSS Grid styling blocks
How to set up a navigation bar using CSS Grid. Apply and set the display to the grid of the parent element. Set the column template to create separate columns for each navigation bar item. Update the list items, remove the default styling of the unordered list items, to create navbar blocks. Add hover effect for the mouse over highlight of the nav bar item blocks.
<!DOCTYPE html>
<html>
<head>
<title>WebSite CSS Grid Laurence Svekis</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”wrapper”>
<header>Header</header>
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
<article>Main Content</article>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
nav ul {
display:grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 50px;
justify-content:center;
justify-items:center;
list-style-type:none;
margin:0;
}
nav ul li{
background-color:#000;
width:90%;
text-align:center;
line-height:50px;
}
nav ul li a{
text-decoration:none;
color:white;
}
nav ul li:hover{
background-color:red;
}
.wrapper {
display: grid;
grid-template-rows: 20% auto 500px 100px;
grid-template-columns: 3fr 1fr;
grid-gap: 1em;
}
.wrapper>* {
border: 1px solid black;
}
.wrapper>header {
background-color: #ddd;
grid-column: 1/3;
}
.wrapper>nav {
background-color: #111;
grid-column: 1/3;
}
.wrapper>article {
background-color: #ccc
}
.wrapper>aside {
background-color: #000;
color: white;
}
.wrapper>footer {
grid-column: 1/3;
background-color: #ddd;
}