Currently, I am in the process of designing a navigation bar using grids. In essence, when the user is an admin, there should be two additional links at the end of the bar. These links need to have the same width and should not be affected by the amount of text present. My implementation utilizes Vue.
I have removed tag attributes for the sake of simplicity
Hint: The purple lines mentioned do not actually exist in CSS; they are simply part of the grid layout for debugging purposes.
1) If the user is not an admin, the search bar takes up one fraction of the space. https://i.sstatic.net/WwK9M.png 2) However, if the user is an admin, then the search bar occupies 1fr, whereas the other two links take up auto space. https://i.sstatic.net/WAwPH.png
<section id="masthead">
<button>
<span></span>
<span></span>
<span></span>
</button>
<div>
<span>Logo</span>
</div>
<div>
<input type="search" id="search">
<button id="loupe">O</button>
</div>
<!-- Display links only if the user is an Admin -->
<div><span>Submit Video</span></div>
<div><span>Profile</span></div>
</section>
This snippet depicts the corresponding CSS styling:
#masthead {
display: grid;
grid-template-columns: 75px 100px 1fr auto auto;
grid-template-rows: auto;
grid-column-gap: 10px;
height: 56px;
box-shadow: 0px 0px 7px rgba(136, 136, 136, 0.22);
position: relative;
z-index: 1000;
}
I am seeking guidance on how to ensure that the last two links maintain equal widths when visible on the screen. Any solutions for achieving dynamic column behavior would greatly help.
Many thanks!