html - 列数未知/宽度相同的 CSS 网格布局

Question

我正在创建一个带有网格的导航栏。 简而言之，当用户是管理员时，他最后会多出两个链接，它们的宽度应该相同，而不是像现在这样依赖于文本量。我正在使用 vue.

为了简单起见，我删除了标签属性

提示:CSS中不存在紫色线条，它只是用于调试的网格布局

1) 用户不是管理员，搜索栏占用 1 分数 2)用户是admin，搜索栏是1fr，另外两个是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>

这是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;
}

当最后两个链接存在于 View 中时，如何使它们具有相同的宽度。 我想要动态列:)

谢谢

Answer 1

我使用这个 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;
}

它并不完美，但它完成了工作: