Css grid layout with unknown of columns / same width

Question

I am creating a navigation bar with grids. In short, when user is admin he will have two more links at the end, that should be the same width and not dependent on the amount of text like it is now. I am using vue.

I removed tags attributes for simplicity

hint: the purple lines dont exist in css it's just grid layout for debuging

1) user is not admin, the search bar takes 1 fraction 2) user is admin, the search bar is 1fr, the other two are auto

<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>

        <!-- show links if Admin -->
        <div><span>Submit Video</span></div> 
        <div><span>Profile</span></div>
</section>

here is the CSS

#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;
}

How Can i make the last two links be the same width when they exist in view. I want dynamic columns :)

Thank you

Have you tried 1fr for the two admin items, and something like 8fr for the search bar? When the admin items are not present, the value of the search fr doesn’t matter. — Michael Benjamin
– Michael Benjamin, Commented Nov 17, 2017 at 16:53
@Michael_B Still it creates large empty space if i add 1fr for admin items. — Kenan Balija
– Kenan Balija, Commented Nov 19, 2017 at 19:57

MaxiGui · Accepted Answer · 2020-10-19 08:46:24Z

2

I fixed it by using this css:

#masthead {
    display: grid;
    grid-template-columns: 75px 75px 0.9fr;
    grid-auto-flow: column;
    grid-template-rows: auto;
    height: 56px;
    box-shadow: 0px 0px 7px rgba(136, 136, 136, 0.22);
    position: relative;
    z-index: 1000;
}

It's not perfect but it gets the job done:

edited Oct 19, 2020 at 8:46

MaxiGui

6,3784 gold badges18 silver badges36 bronze badges

answered Nov 19, 2017 at 19:59

Kenan Balija

7031 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Css grid layout with unknown of columns / same width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related