Dynamic Column Count in Lovelace Grid Card Based on Screen Width

Feature Requests
1

Hello Home Assistant developers,

I’m a Home Assistant user who has been working extensively with Lovelace UI. One persistent issue I have encountered is the inability of the default Grid Card to dynamically adjust the number of columns based on screen width.

Problem:

  • Currently, the grid card requires a fixed columns value, which does not allow responsiveness.
  • Using layout-card is an alternative, but it introduces unwanted spacing around elements like custom:button-card, making it unsuitable for precise UI design.
  • card-mod does not provide an effective way to change the column count dynamically either.

Proposed Solution:

  • Introduce native support in the grid card for dynamic columns using grid-template-columns: repeat(auto-fit, minmax(Xpx, 1fr)).
  • Allow media queries in the grid card configuration to adjust the column count based on screen size.

Use Case:

For example, I would like to have:

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

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

Expected Benefit:

  • A more flexible and responsive UI in Home Assistant without requiring custom cards.
  • Improved native handling of different screen sizes within Lovelace.
  • Reduced reliance on third-party 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.

Looking forward to your thoughts and feedback.

Thanks!

2

You can do this with the new sections view type.

I no longer have separate dashboards for mobile and desktop because of this.

Also the frontend devs are unlikely to see your request here. A better place is: home-assistant/frontend Other Feature Requests · Discussions · GitHub

3

Hello Majed,

This appears to be a Frontend Related Feature Request as it is asking for changes to Frontend Menus, Dashboards, or Sections.

These Feature Requests are handled in a different system, and will not be seen by the right people if posted in the HA forums.

Please add your Feature Request into GitHub here:
home-assistant/frontend Other Feature Requests · Discussions · GitHub.

See more info about Feature Requests HERE

4

Thanks, I post it at GitHub in the following link: