Streaming live at 10am (PST)

Grid. FR unit just got min value with the latest grid update


#1

@cyberdave @Brando

Hi guys!

Looks like I am the first one to hit this problem so let’s sort it out!

Sometime in the recent days the grid was upgraded somewhat (with “align self” quick settings for grid children among other things) but it introduced what I perceive as a minimum value hardcoded to the FR unit. Hence my grid which worked just fine not long ago suddenly went off smaller screens since the 1fr is no longer “whatever dimension necessary to fit every column with gaps in the viewport” but got some default minimum width value.

Can you confirm this and let us know this value and (ideally) a way to remove it?

Thanks!


#2

Oh, small clarification. This affects only designer view, preview and published site are unaffected. Should’ve posted this in “bugs” section!


#3

Hi @dram

I’ve reached out to the team to see if we’ve made any updates that could have set a hard min like you mentioned.

You can edit min/max FR settings here:
CloudApp

Can you also please share the Read-Only for the project where you see this?

​Thanks in advance.


#4

It is not like this happens in only one project. I can easily replicate it in new project so I assume this is how it is now.

  • make a 12 clmns grid
  • make gaps static (for example 4em)
  • put something inside the grid (otherwise it won’t behave this way)
  • resize viewport

at around 1070px wide the columns will start being cut off in designer. Or just enter tablet view and they are already cut off.


#5

Hi @dram

Looks like we did make a recent update here.

We recently shipped a designer tweak to autoinflate empty columns or tracks that are fr with a 75px minimum — similar to how a div has a base height when first added to the canvas. This is an added convenience so that you can drag elements into the cell. Without this, the columns or rows may collapse and cause an even more annoying issue with adding content.

If you turn off the “grid lines” (hide/empty lines button in the left sidebar), it should “turn off” the inflator here and those empty columns will collapse.

Hope this helps provide some clarification!


CSS Grid odd responsive behavior
#8

Yep, that did it! Thank you for explanation, it does indeed sound reasonable. Though considering that empty grid columns are likely to be found in a greater numbers that regular empty divs (which usually doesn’t happen at all - you populate or style divs as soon as you create them), I’d say making that minimum width smaller would make more sense.


#9

I’d say making that minimum width smaller would make more sense.

Great suggestion! I’ll pass this along to the team :slight_smile:


#10

I mean it is not too big of a deal but since “show empty elements” is on by default each time one starts designer, and there is no quick shortcut key to disable it, it is a little bit annoying to switch it off every time. Also it may help with “why no site work, I confuse” kind of situations I faced :smiley:

I understand where the min size comes from though - it is just a necessary width to show “1fr” in the column header.