html - 在 grid-template-columns 中使用 repeat(auto-fit, minmax()) 将一列设置为等宽

Question

我在包含 7 个嵌套元素的导航元素中使用网格。我希望第一个至少比其他的大 2 倍。我试着用这个:

grid-template-columns: 2fr repeat(auto-fit, minmax(100px, 1fr));

但是它不起作用，在控制台中它显示无效的属性值，为什么？我怎样才能用另一种方式做到这一点？

Answer 1

类似的东西？

此外，也许这会有所帮助:CSS Grid with variable number of “auto” rows, but one row should take “1fr”

.container{
display:grid;
grid-template-columns: 2fr repeat(6, minmax(auto,1fr));
}

.el:first-child{
background-color:red;
}

.el{
border:solid 1px black;
}

<div class="container">
  <div class="el">Element</div>
  <div class="el">Element</div>
  <div class="el">Element</div>
  <div class="el">Element</div>
  <div class="el">Element</div>
  <div class="el">Element</div>
  <div class="el">Element</div>
</div>