CODEWITHSUNDEEP
csscss-grid
Freestyle09
Freestyle09

Reputation: 5528

How to combine minmax function with vh in css grid?

I want to set one rows height in mobile view to maximum of 670px and below that minimum of 100vh, but when I write it like this:

@media only screen and (max-width: $bp-mobile) {
    grid-template-rows: minmax(100vh, 67rem) repeat(7, max-content);
  }

It always expands me first row to 100vh if viewport height equals 1000px my row has getting height of 1000px. How to combine vh below that specific maximum height 670px to be always 100vh and over 670px to lock this row to 670px of height?

.container {
  display: grid;
  border: 2px solid red;
  grid-template-rows: minmax(100vh, 67rem) 1fr;
}

.test-1 {
  background-color: orangered;
}
.test-2 {
  background-color: cyan;
  height: 30rem;
}
<div class="container">
  <div class="test-1">1</div>
  <div class="test-2">2</div>
</div>

Upvotes: 1

Views: 939

Answers (1)

Temani Afif
Temani Afif

Reputation: 274225

You can do it with max-height like below:

.container {
  display: grid;
  border: 2px solid red;
  grid-template-rows: auto 1fr;
}

.test-1 {
  background-color: orangered;
  height:100vh;
  max-height:67rem;
}
.test-2 {
  background-color: cyan;
  height: 30rem;
}


html {
  font-size:10px;
}
<div class="container">
  <div class="test-1">1</div>
  <div class="test-2">2</div>
</div>

Upvotes: 1

Related Questions