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

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

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

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

1） 用户不是管理员，搜索栏取1分 2） 用户是admin，搜索栏是1fr，其他两个是auto

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

---

谢谢

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

这并不完美，但它完成了任务：

---

您是否尝试过将1fr用于两个管理项，将8fr用于搜索栏？当管理项不存在时，搜索fr的值无关紧要。@Michael_B如果我为管理项添加1fr，仍然会产生很大的空白。

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

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