在 grid-template-columns 中使用 repeat(auto-fit, minmax()) 设置一列等宽，其余列

【问题标题】：Setting one column equal width and for the rest using repeat(auto-fit, minmax()) in grid-template-columns在 grid-template-columns 中使用 repeat(auto-fit, minmax()) 设置一列等宽，其余列
【发布时间】：2019-12-24 17:11:35
【问题描述】：

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

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

但它不起作用，在控制台中显示无效的属性值，为什么？我该如何以另一种方式做到这一点？

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：