jaffathecake,
@jaffathecake@mastodon.social avatar

This always catches me out:

When specifying grid-template sizes, if values aren't wrapped in minmax(), then they're implicitly minmax(auto, value).

So 1fr is implicitly minmax(auto, 1fr).

If you actually want 1fr, you need to use minmax(0, 1fr).

https://codepen.io/jaffathecake/pen/BabrWqa

tomayac,
@tomayac@toot.cafe avatar
ollicle,
@ollicle@mastodon.social avatar

@jaffathecake @bramus a critical step to contain an overflow (scrolling) in a grid layout.

Learnt this the hard way!

ZMYaro,

@jaffathecake I have spent an embarrassing amount of time confused about that. Saves this post so I don't have to Google it the next time I forget 😂

wortwart,

@jaffathecake That's because fr is not a static size but a flex factor (like in flex-grow). But it's tempting to think of it as some kind of percentage value.

jaffathecake,
@jaffathecake@mastodon.social avatar

@wortwart I don't think it's that straight forward.

It's weird to say that 1fr in grid-templates means minmax(auto, 1fr) by default, because then you have to carve out an exception to avoid recursion (which the spec does).

gundersen,
@gundersen@mastodon.social avatar

@jaffathecake I've stumbled across this and found it really strange too. Why doesn't mimmax(auto, 1fr) limit it to max(1fr), isn't that the point of mimmax??? MDN has the answer, of course: "If max < min, then max is ignored and minmax(min,max) is treated as min". What?!?!

https://developer.mozilla.org/en-US/docs/Web/CSS/minmax#syntax

sil,
@sil@mastodon.social avatar

@jaffathecake huh. Didn't know that. Good tip!

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • DreamBathrooms
  • mdbf
  • ethstaker
  • magazineikmin
  • GTA5RPClips
  • rosin
  • thenastyranch
  • Youngstown
  • InstantRegret
  • slotface
  • osvaldo12
  • kavyap
  • khanakhh
  • Durango
  • megavids
  • everett
  • cisconetworking
  • normalnudes
  • tester
  • ngwrru68w68
  • cubers
  • modclub
  • tacticalgear
  • provamag3
  • Leos
  • anitta
  • JUstTest
  • lostlight
  • All magazines