Horizontal Menu w/ vertical bar separator

by pj_js15

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Horizontal Links with Vertical Separator</title>
	<style>
		/* CSS to style the links */
		nav {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 10px;
    }

    nav > a {
      display: flex; /* add display:flex to allow vertical alignment */
      align-items: center; /* vertically align content in the middle */
      padding: 10px 20px;
      text-decoration: none;
      color: #666;
      border-right: 2px solid #000;
      height: 100%; /* set the height to 100% of the parent container */
      line-height: 0px; /* set the line-height to 10px to center the separator */
      font-size: 16px;
    }


		nav a:last-child {
			border-right: none; /* Remove separator from last link */
		}
	</style>
</head>
<body>
	<!-- HTML code for links -->
	<nav>
		<a href="#">Men</a>
		<a href="#">Women</a>
		<a href="#">Kids</a>
		<a href="#">Home</a>
	</nav>
</body>
</html>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two columns with equal width */
  gap: 0px; /* gap between images */
  max-width: 600px;
  background-color: #5C798E;
  padding: 8px;
  border-radius: 8px;
  border: none;
}

img {
  width: 50%; /* make the images fill the grid cells */
  width: 100%; /* preserve aspect ratio */
}