This is absolutely lovely!!! Can not wait for this! 
Maybe later on, resizing the elements could be a suggestion along with drag and drop. 
2 Likes
Really fantastic news. The prior mechanism and need for tons of custom elements was too tough to bother mastering, so my dashboards look messy today. Really looking forward to this huge leap forward in UX. Big thanks to the whole team for all the work!
Yes ā¦Re sizing and maybe CSS customizing ā¦ Then ā¦ The Chery on the Chery on the top of the cake 
1 Like
Thank you for updating the dashboards. This looks very promising 
Does anybody know if the grid will be customizable, i.e. the user will be able to scale a card to be larger than one grid section?
There are cards like graphs (e.g. ApexCharts) that can be scaled to better show the relevant information.But this requires assignment to a multiple grid rows/columns.
Will this kind of grid usage (like in Thomas Lovenās mod) be part of the HA dashboard grid concept?
1 Like
Iām really looking forward to this - great job!
It might be good though, if cards could be configured to āstretchā in order to get all sections in a row to have equal height. In CSS-terms cards might need an area that is defined as āflex-growā and thus would be allowed to stretch if a certain flag is set on the card by the user. A good example would be graphs, images and maps to adjust their height based on sibling sections, while having a default min-height applied.
Another cool thing would be if users would be able to configured the position of sections for each breakpoint (mobile, tablet, desktop). By using flexbox and the āorderā CSS property, this might be doable.
edit: the cherry on top would be a āgrid sectionā or view for expert users. So a section/view, which you can divide into n rows (and columns, defaulting to the default layout grid columns) while being able to freely merge cells. And components dragged into those cells would adjust their size accordingly (using @container CSS queries to detect if compact or wide layout should be used etc.).
In case of a grid view, breakpoints likely wonāt work, but thatās probably fine as such dashboards are mostly targeted to desktop/tablet anyway.
1 Like
Hey design team, this looks awesome. Hey but would it be possible to solve the āremote controlā issue everybody is facing creating a device control card for mediaplayers? > see my reaction on the previous grace post: What about Grace? Tune in to our special livestream next week! - #34 by HAuserSince2019
try with a vertical-stack-card in your column, and place the sensor-graph, and in worse case use - margins
This is Great!!! Iāve been playing with if for a couple hours. Seems very intuitive.
One thing I was trying to do is put āHomeā and āBackā Button in the upper left corner since I use Subviews. If I create a section it takes up the whole column. If I put this in the first section, then it has the header name above it. It got me to thinking about header and footer section types. Any possibility to get this added?
Another possible solution: I see that the view (subview) has a back arrow to go back to where you came from, but it would be great to have a āHomeā Button. But the header/footers would provide more flexibility.
Thanks again
4 Likes
Love this so far!!
Already on my wishlist for future updates as we move towards the first stable release.
- Sections with descriptions below the title
- Allow us to modify in the UI the existing
--grid-max-section-counton the sectioncontainer. 4 wide is too much for me, would love to set it to 3 for most screens. I know we can handle this via themes but makes sense to be UI based. - +1 to other peopleās request to set the size of tiles within sections to be taller/wider
4 Likes
I just played with new dashboard and the most annoying thing is that Tile card doesnāt fill the whole Section width, only half of it.
?
I just made a view with 3 columns, so itās doable
PS: Sorry for the quality, hard to stay within the limit of 3mb
This is really great. Thanks for this. Got my WTH post done now
Next improvements will be some āfixedā sections like a āsidebarā and āheaderā, then the sidebar-card can finally move away and everything is in HA itself. Great effort team, thanks a lot for it! Keep it goin 
2 Likes
Awesome update - only experienced one issue so far in that my one-and-only TODO list has vanished after a reboot (added an item to it just prior to reboot)
The ICS file still exists in .storage and the entry in core.entity_registry remains intact.
The integration reports one entity (correct) and the entity is listed under entities (it shows restored)
Hereās the lowdown - looks like an issue with TimeZones
This is the only line in the ics file that uses that DTSTART KEY - it looks a bit corrupted to me
DTSTART;TZID=PST:20240306T233236
BEGIN:VTODO
DTSTAMP:20240307T073236
UID:dec35afa-dc54-11ee-99df-dca63291b95e
CREATED:20240307T073236
DESCRIPTION:Be able to turn on the ringer on phone in emergencies
and at weekends
DTSTART;TZID=PST:20240306T233236
SEQUENCE:0
STATUS:NEEDS-ACTION
SUMMARY:phone ringer
END:VTODO
END:VCALENDAR
2024-03-06 23:39:37.665 ERROR (MainThread) [homeassistant.components.todo] Error while setting up local_todo platform for todo
Traceback (most recent call last):
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 139, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 341, in __init__
raise validation_error
pydantic.error_wrappers.ValidationError: 1 validation error for Todo
__root__
Failed to validate: 20240306T233236, errors: (["Expected DATE-TIME TZID value 'PST' to be valid timezone", "Expected value to match DATE pattern: '20240306T233236'"]) (type=value_error)
The above exception was the direct cause of the following exception:
Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/helpers/entity_platform.py", line 350, in _async_setup_platform
await asyncio.shield(awaitable)
File "/usr/src/homeassistant/homeassistant/components/local_todo/todo.py", line 71, in async_setup_entry
calendar = IcsCalendarStream.calendar_from_ics(ics)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/calendar_stream.py", line 82, in calendar_from_ics
stream = cls.from_ics(content)
^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/calendar_stream.py", line 69, in from_ics
return cls(**result)
^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 139, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 339, in __init__
values, fields_set, validation_error = validate_model(__pydantic_self__.__class__, data)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 1076, in validate_model
v_, errors_ = field.validate(value, values, loc=field.alias, cls=cls_)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 895, in validate
v, errors = self._validate_sequence_like(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 928, in _validate_sequence_like
r, ee = self._validate_singleton(v_, values, v_loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1094, in _validate_singleton
value, error = field.validate(v, values, loc=loc, cls=cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 884, in validate
v, errors = self._validate_singleton(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1101, in _validate_singleton
return self._apply_validators(v, values, loc, cls, self.validators)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1157, in _apply_validators
v = validator(cls, v, values, self, self.model_config)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/class_validators.py", line 337, in <lambda>
return lambda cls, v, values, field, config: validator(v)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 711, in validate
return cls(**value)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 139, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 339, in __init__
values, fields_set, validation_error = validate_model(__pydantic_self__.__class__, data)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 1076, in validate_model
v_, errors_ = field.validate(value, values, loc=field.alias, cls=cls_)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 895, in validate
v, errors = self._validate_sequence_like(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 928, in _validate_sequence_like
r, ee = self._validate_singleton(v_, values, v_loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1094, in _validate_singleton
value, error = field.validate(v, values, loc=loc, cls=cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 884, in validate
v, errors = self._validate_singleton(v, values, loc, cls)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1101, in _validate_singleton
return self._apply_validators(v, values, loc, cls, self.validators)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/fields.py", line 1157, in _apply_validators
v = validator(cls, v, values, self, self.model_config)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/class_validators.py", line 337, in <lambda>
return lambda cls, v, values, field, config: validator(v)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/pydantic/main.py", line 711, in validate
return cls(**value)
^^^^^^^^^^^^
File "/usr/local/lib/python3.12/site-packages/ical/todo.py", line 203, in __init__
super().__init__(**data)
File "/usr/local/lib/python3.12/site-packages/ical/component.py", line 141, in __init__
raise CalendarParseError(f"Failed to parse component: {err}") from err
ical.exceptions.CalendarParseError: Failed to parse component: 1 validation error for Todo
__root__
Failed to validate: 20240306T233236, errors: (["Expected DATE-TIME TZID value 'PST' to be valid timezone", "Expected value to match DATE pattern: '20240306T233236'"]) (type=value_error)
That would be very useful indeed, a āstickyā section to allow for navigation for instance, that remains on top or bottom even when scrolling.
Secondly, is there any chance that the width or height of the individual elements of a section can be adjusted? Eg to allow more mushroom template cards on 1 line, or to make a tile card take the a tire width?
Excellent work overall by the home assistant team BTW, this really takes things several steps further!
Looks good so far! Just had a play and I see the potential, I think for it to work for me though it still needs a bit more control. As others have mentioned a header and footer area would be great for adding a page title, chips, navigation elements etc. Plus the ability to grow sections over more than one column.
Iāve said it at times during the live release parties. Home Assistant (Nabu Casa) developers are engaging big times onto the Home Assistant newbies and/or the not so tech-savvy in coding users.
This is one of my main reasons I not only started with Home Assistant instead of others platforms, but that Iām still onboard this platform. Kudoās to all for making this my user experience at a top notch level.
1 Like
This is dope! It will clean my dashboard so much!
I tried the beta on a dashboard, and here are the things that are missing for me to reach perfection:
- The ability to customize the section width: I do have a markdown card that I want to take 100% height before the rest of the content
- The possibility to customize the grid layout: Iām using a custom set of lovelace cards to make my dashboard to fit my needs, but these card can be smaller than the grid, 50px in my case
- (Might be already possible, but I can figure out how) Iād like to customize the amount of columns a card can take.
Anyway, itās a beta, and Iām sure you have a lot of possible evolutions on your mind, so keep up the good work!
3 Likes
maybe you can place them in a native grid/vertical/horizontal-stack_card
but i agree, i use custom:grid-layout, for the same reason
But im sure someone would soon create a Theme, to address the root, and the huge gap between columns
PS: With card-mod You can already set the hight of individual cards.
1 Like
I am definitely watching for the āheaderā and āsidebarā to become an option.
3 Likes