right align link items containing image and text along navbar - html

Question

I would like to create a right aligned navbar. Each link item should contain an image and a text. When having text only this code works fine
#navbar {
height: 60px;
display: grid;
justify-content: end;
padding: 20px;
background: red;
align-items: center;
}
a {
text-decoration: none;
margin: 0 10px;
color: white;
background: black;
}
<div id="navbar">
<div>
Home
About
Projects
Contact
Imprint
</div>
</div>
Now I added images and texts to the link item and built a wrapper around these elements.
#navbar {
height: 60px;
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
margin: 0 60px;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>
Unfortunately the CSS breaks now. How can I fix it so that each link item is aligned to the right, centered vertically and is placed along the navbar?
I achieved it using flexbox
https://jsfiddle.net/q48tyuac/
but maybe there is a better solution using the grid attribute. Because when you lower the screen size these elements are fixed and I would like them to break to the next row if there is no space left.

Answer 1

use flex-wrap:wrap;
#navbar {
/* height: 60px; */
display: flex;
justify-content: flex-end;
padding: 20px;
flex-wrap:wrap;
align-items: center;
background: red;
/* margin: 0 60px; */
}
https://jsfiddle.net/6p03s5cm/

Answer 2

if you dont want to use flexbox with grid you can target #navbarLinkContainer and do it with columns
#navbar {
display: grid;
justify-items: end;
padding: 20px;
align-items: center;
background: red;
}
#navbarLinkContainer {
display:grid;
grid-template-columns:repeat(3 , 1fr) ;
}
.navbarItemContainer {
text-align: center;
text-decoration: none;
margin: 0 10px;
}
.navbarItemImg {
width: 64px;
height: 64px;
}
<div id="navbar">
<div id="navbarLinkContainer">
<a class="navbarItemContainer" href="/">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Home</div>
</div>
</a>
<a class="navbarItemContainer" href="/about">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">About</div>
</div>
</a>
<a class="navbarItemContainer" href="/projects">
<div>
<img class="navbarItemImg" src="https://discordapp.com/assets/19654c38399b0e75c351d6fc960fe0ca.svg">
<div class="navbarItemTitle">Projects</div>
</div>
</a>
</div>
</div>