Setting one column equal width and for the rest using repeat(auto-fit, minmax()) in grid-template-columns

Question

I'm using grid in my nav element that contains 7 nested elements. I want the first one to be at least 2x larger than the others. I tried to use this:

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

But it doesn't work, in the console it shows that is invalid property value, why? How can I do this in another way?

score 2 · Accepted Answer · answered Dec 24 '19 at 09:08

Something like that ?

Also, maybe this could help : 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>

Setting one column equal width and for the rest using repeat(auto-fit, minmax()) in grid-template-columns

1 Answers1