具有未知列/相同宽度的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;
}

当视图中存在最后两个链接时，如何使相同宽度。 我想要动态列：）

谢谢

Answer 1

我使用这个css修复了它：

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

这不完美，但它完成了工作：