CODEWITHSUNDEEP
csscss-grid
SunnyMonster
SunnyMonster

Reputation: 550

fr units cannot be the minimin value of minmax() (css)

When I tried putting 1fr in the first slot of minmax()and the browser dev tools tells me that it is not valid. The moment I take away the 1fr, it works.

Code that did not work:

.grid {
  grid-template-rows: minmax(1fr, auto); /* this did not work */
}

Is there any work arounds to this?

Upvotes: 2

Views: 1180

Answers (1)

Charles Lavalard
Charles Lavalard

Reputation: 2321

1fr cannot be your minimum because 1fr takes

1 fraction of the leftover space in the grid container

Here is the doc

You can do something like this

.grid {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
}

.bloc {
display: flex;
  justify-content: center;
  align-items: center;
  background-color: teal;
  color: white;
}
<div class="grid">
  <div class="bloc">1</div>
  <div class="bloc">2</div>
  <div class="bloc">3</div>
  <div class="bloc">4</div>
  <div class="bloc">5</div>
  <div class="bloc">6</div>
  <div class="bloc">7</div>
  <div class="bloc">8</div>
  <div class="bloc">9</div>
</div>

Upvotes: 2

Related Questions