Dynamic Column Count in Lovelace Grid Card Based on Screen Width

[Majed-BX]

I would like to request a feature that allows the number of columns in the Lovelace Grid Card to adjust dynamically based on screen width.

Current Issue

• The current grid card requires a fixed columns value, which does not allow responsiveness.
• Using layout-card causes unwanted spacing issues around elements like custom:button-card, making it a non-ideal solution.
• card-mod does not provide a reliable way to dynamically adjust column count.
• Proposed Solution
• Enable dynamic column adjustments in the grid card using CSS grid properties, such as:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

• Allow media query-like behavior in the grid card configuration to adjust column count.

Use Case
I would like to have:

• 3 columns on desktops (width > 1000px)
• 2 columns on tablets (width between 767px - 999px)
• 1 column on mobile devices (width < 767px)

Currently, this is impossible without third-party workarounds that break the UI consistency.

Expected Benefit

• A more flexible and responsive UI in Home Assistant without requiring third-party solutions.
• Improved native handling of different screen sizes within Lovelace.
• Reduced reliance on custom solutions for fundamental UI needs.

I appreciate all the hard work the developers put into Home Assistant, and I believe this feature would greatly enhance the Lovelace experience for many users.

Thanks!