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

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

Css 列数未知/宽度相同的网格布局

Css grid layout with unknown of columns / same width

html

css

vue.js

css-grid