"auto" value in "grid-template-columns" does not work properly for some cards

[ildar170975]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Consider a Grid card:

type: grid
columns: 2
cards:
  - type: markdown
    content: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  - type: markdown
    content: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Try to apply grid-template-columns: 50% auto; in Code Inspector:

This causes an overflow.

Similar case - with grid-template-columns: 51% auto; for history-graph (note - 51%):

Does not happen, for example, with Entities card or Area card:

Yes, I understand that a user is not supposed to play with Code Inspector.
But here there is a suspicion that something may not work properly in Frontend.

Describe the behavior you expected

The auto value should cause a filling based on a remaining area.

Steps to reproduce the issue

see above

What version of Home Assistant Core has the issue?

2025.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Chrome 131.0.6778.265

Which operating system are you using to run this browser?

Win10

State of relevant entities

Problem-relevant frontend configuration

Javascript errors shown in your browser console/inspector

Additional information

No response

[maciekmaciej]

Looks like you want to use minmax(0, 1fr) instead of auto :)

[ildar170975]

Assume “grid-template-columns: 10% auto” - what is an expected result with “minmax(0, 1fr)”?
Anyway, this could be a workaround; the question is why “auto” stopped working.