CODEWITHSUNDEEP
htmlcsscss-grid
bartekw2213
bartekw2213

Reputation: 81

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

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?

Upvotes: 1

Views: 1240

Answers (1)

Manon
Manon

Reputation: 389

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>

Upvotes: 2

Related Questions