2

I have an issue with CSS Grid in my app while using minmax function, and that codepen demonstrates it:

https://codepen.io/dragonflypl/pen/eYNxmrB

In general: AFAIR minmax ignores max value, if min value is bigger than max. So for:

grid-template-columns: auto minmax(auto, 1fr) 1fr 1fr;

if content in the second column is really large, then it should take auto and grow the column. However, it does not work like this.

But... In the example that has:

grid-template-columns: auto auto 1fr 1fr;

it works as expected. Both auto columns grow and seem to share their piece of space equally.

So it looks like having minmax function, delays the computation of the track size.

Is there any technical explanation for it?

.grid-one {
  display: grid;
  grid-template-columns: auto minmax(auto, 1fr) 1fr 1fr;
}

.grid-two {
  display: grid;
  grid-template-columns: auto auto 1fr 1fr;
}

.grid-one>div,
.grid-two>div {
  border: 1px solid black;
}
<div class="grid-one">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident velit minus reprehenderit rem rerum, impedit consequuntur fuga inventore est hic nisi placeat non unde sapiente quia blanditiis! Repudiandae, provident incidunt!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ratione ducimus ipsa impedit in iste cum? Odio possimus porro placeat! Quo similique exercitationem eligendi, numquam fuga voluptas doloribus amet aliquam!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tenetur iste, quibusdam numquam sunt quod libero consequuntur nesciunt, laboriosam aperiam, fugit accusantium veritatis sequi? Aspernatur delectus dolorum minus laborum repellendus.</div>
  <div>a</div>
</div>

<div class="grid-two">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident velit minus reprehenderit rem rerum, impedit consequuntur fuga inventore est hic nisi placeat non unde sapiente quia blanditiis! Repudiandae, provident incidunt!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ratione ducimus ipsa impedit in iste cum? Odio possimus porro placeat! Quo similique exercitationem eligendi, numquam fuga voluptas doloribus amet aliquam!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tenetur iste, quibusdam numquam sunt quod libero consequuntur nesciunt, laboriosam aperiam, fugit accusantium veritatis sequi? Aspernatur delectus dolorum minus laborum repellendus.</div>
  <div>a</div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
dragonfly
  • 17,407
  • 30
  • 110
  • 219
  • 1
    `minmax(auto, 1fr)` is the same as `1fr` so your first example is `auto 1fr 1fr 1fr` https://stackoverflow.com/a/52861514/8620333 – Temani Afif Mar 29 '20 at 15:18
  • 1
    Also, `fr` units are not actual lengths. So your point about... `if min > max, then max is ignored`... doesn't apply here, because `fr` units are only distributions of free space (and these distributions occur after all actual lengths are calculated). https://www.w3.org/TR/css-grid-1/#fr-unit – Michael Benjamin Mar 29 '20 at 16:12

0 Answers0